jQuery получить данные и показать на HTML

Question

Я создал раздел комментариев для проекта, в котором перечислены все изображения, загруженные пользователем. jQuery используется для переключения кнопки просмотра комментариев и отображения связанных комментариев к этой картинке. Ajax-запрос извлекает данные из базы данных.

Теперь проблема в том, что только первая картинка показывает комментарии, а не остальные из приведенных ниже.

JQuery

    var array1, array2, iden, value, repeat;

    function fetching(iden) {
        value = iden.data("id");
        $.ajax({
            url: "{% url 'fetchertwo' %}",
            type: "GET",
            data: {
                'search': value
            },
            dataType: 'json',
            success: function(data) {
                array1 = data.content;
                array2 = data.author;
                $.each(array1, function(i, item) {
                    iden.find($(".paratwo")[i]).html( array2[i]+'\n')
                    console.log(array1[i], array2[i]);
                });
            }
        });
     }

     $('.headingone').click(function(event) {
         event.preventDefault();
         iden = $(event.target).next()
         $(this).next().toggle("slide");
         fetching(iden)
     });

     $('.formtwo').on("submit", function(event) {
         event.preventDefault();
         console.log(iden)
         var formData = $(this).serialize();
         $.post("/usercreation/picomment/" + value, formData,
                function(response) {
                    fetching(iden)
                });
         this.reset();
     });

HTML

<a style="text-decoration:blink;" href="" class="headingone" data-id={{item.pk}} >View Comments</a>

<div class="menu" data-id={{item.pk}} style="display:none">
    {% for i in item.piccomments.all %}
        <p class="paratwo" style="margin:0px;"></p>
    {% endfor %}
    <form class="formtwo" method="post" action="">
        {% csrf_token %}
        <div class="form-group">
            <div class="row">
                <div class="col-6">
                    <input data-id={{item.pk}} autocomplete="off"  type="text" name="commentadd" class="form-control commentadd" placeholder="Add Comment">
                </div>
                <div>
                    <input class="btn btn-outline-dark" type="submit" name="submit" value="Submit">
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

Используйте insertBefore для вставки элементов и .html() для перезаписи предыдущего содержимого.

Добавьте div для ваших комментариев:

<div id="comments">
  {% for i in item.piccomments.all %}
    <p class="paratwo" style="margin:0px;"></p>
  {% endfor %}
</div>


success: function(data) {
  array1 = data.content;
  array2 = data.author;

  const comments = [];
  $.each(array1, function(i, item) {
       comments.push('<p class="paratwo">' + array1[i] + '<br> by:' + array2[i] + '</p>');
  });
  $('#comments').html(comments.join(''));
}