如何显示 <div> AJAX 对 for 循环内部的响应

我正在尝试编辑评论框，因此有很多用户可以对帖子发表评论。每个用户都可以编辑其评论。注释从数据库中获取，每个注释都写入<div class="view-comment">。

我的问题是单个编辑结果显示在所有注释字段中。我认为这是因为循环中的代码。如何单独更改它们？

<?php foreach ($comments as $row)  
{ 
  $comment = $row["comment"];
  $username = $row["username"]; ?>
  <div class="view-coment" ">
    <div class="comment-padd">
      <div class="comments">
        <div class="row">
          <div class="col-md-1">
            <div class="coment-lft">
              <?php if($comment) { ?>
                <img src="<?php echo base_url() ?>img/avatar/<?php echo $username ;?>.jpg" class="img-response">
              </div>
            </div>
          <div class="col-md-11">
            <h2><?php echo $row['username'];?></h2>
            <p><?php echo $row['comment'];?></p>
            <hr>
          </div>
        <?php } ?>
      </div>
      <?php if ($username == $this->session->userdata('username') ){ ?>
        <div class="comments-edit">
          <div class="dropdown">
            <a class=" dropdown-toggle" id="cmnt"><i class="fa fa-angle-down " aria-hidden="true" data-toggle="dropdown"></i></a>
            <ul class="dropdown-menu-5" aria-labelledby="cmnt">
              <input type="button" id="edit" value="Edit" />
              <button class="my_button" id="<?php echo $row['id']; ?>" >edit</button>

$('button.my_button').click(function(e) {
  e.preventDefault();     
  var url = $(this).attr('data-url');
  var id = $(this).attr('id');
  // alert(id);
  $.ajax({
    type: "POST",
    url: '<?php echo site_url('home/comment_edit'); ?>',
    data: 'id=' + id,
    cache: false,
    success: function(data){
      $('.view-coment').html(data);
    }
  });
  return false;
});