jQuery仅作用于迭代的第一个元素

Question

所以我在迭代循环中有这个表单代码（用于添加注释）。

<div class="modalFootBot" id="modalFootBot">                                               
  <form class="form" name="addComment" id="addComment" method="post">
    <input type="hidden" name="ac" id="ac" value="7">
    <div class="form-group m-0">
      <input type="hidden" name="postID" id="postID" value="<?php echo $userPosts->up_postID; ?>">
      <div class="input-group">
        <textarea class="form-control submit_on_enter" rows="3" placeholder="Add Comment.." name="comment"></textarea>
        <span class="input-group-addon">
          <button type="submit" id="submitComment" class="btn btn-default"><img src="image/send-button.png"/></button>
        </span>
      </div> 
    </div>
  </form>
</div>

我有一个JS代码，在提交表单时起作用。

然而，问题是，如果有3个图像生成此表单代码，则只有第一个工作。通过工作我的意思是，当你点击提交按钮或提交表格时，JS工作..对于其他2个图像，页面会刷新。

我在这里做错了什么？

这是我的JS代码

$("#addComment").submit(function(e){
    e.preventDefault();
    data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: data,
        success: function (data) {

         $("#commentsAreaController").load(location.href+" #commentsAreaController>*","");
         $("#modalFootBot").load(location.href+" #modalFootBot>*","");
        }
      });
})