jQuery获取数据并在HTML上显示

我为一个项目做了一个评论部分，列出了每个用户上传的图片。jQuery用于切换“查看注释”按钮并显示与该图片相关的注释。Ajax请求从数据库获取数据

现在的问题是，只有第一张图片似乎显示了评论，而不是下面的其余部分

jQuery HTML

{item.piccomments.all%中的i的%s}

{%endfor%}
{%csrf_令牌%}

使用

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(''));
}

{item.piccomments.all%中的i的%s}

{%endfor%}
成功：功能（数据）{
array1=data.content；
array2=data.author；
常量注释=[]；
$。每个（阵列1，功能（i，项目）{
comments.push（'
'+array1[i]+'
通过：'+array2[i]+'
'）；
});
$（'#comments'）.html（comments.join（''）；
}

谢谢，伙计，还有一个问题。现在假设我已经打开了评论部分，下面是一个添加新评论的表单。现在说我现在的评论是“嘿”和“sup”。然后在提交一个新的（比如说“yoo”）后，我看到“hey”、“sup”、“hey”、“sup”、“yoo”

<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>

<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(''));
}