Javascript 使用不同元素和相同id的ajax引导模式弹出窗口

我目前正在做一个时事通讯项目，陷入了这种情况

在“列表”页面中，我显示了所有带有引导数据表的邮件列表，每个记录都有一个“操作”图标（查看、编辑、删除）。当用户点击“查看”图标时，我想使用bootstrap模式弹出窗口，其中包含另一个数据表，以显示其记录的“电子邮件列表”。为了检索model中的数据，我使用Ajax函数通过数据库进行连接，并在每个元素中使用“data row”属性来获取行的id

这是我的“列表”页面代码

<table id="datatable" class="table table-striped table-bordered">
<thead>
  <tr>
    <th style="width:5%;">No</th>
    <th>Nama Milis</th>
    <th style="width:20%;">Jumlah email</th>
    <th>Action</th>

  </tr>
</thead>


<tbody>

<?php 
$i=1;
foreach ($milis as $milis){
?>


  <tr>
    <td><?php echo $i;?></td>
    <td><?php echo $milis['nama'];?></td>
    <td><?php echo $this->m_mailinglist->get_mail_milis($milis['id'])->num_rows();?></td>
    <td>
    <button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button>
    <button type="button" class="btn btn-warning"><i class="fa fa-pencil"></i></button>
    <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
    </td>

  </tr>
<?php
$i++;
}
?> 


</tbody>

不
纳玛·米利斯
朱姆拉电子邮件
行动
Mailinglist/ajax_listMail'，
数据：{id:id}，
成功：功能（数据）{
$（'.loading'）.hide（）；
$（'.modal content'）.html（数据）；
},
异步：false
});
});
});

我使用get_属性检索我单击的每个元素的数据行属性

问题是，单击功能仅在记录的第一个按钮中起作用，记录的其余部分不会显示“id”警报，并且无法检索数据。还有这方面的任何解决方案或任何最简单的方法吗？谢谢：）

$（文档）。在（“单击”、“.requestmail”上，函数（事件）{
var valu=$（this.attr（'attrd'）；
警报（VAU）；
var$modal=$（“#myModal”）；
$.ajax({
方法：“张贴”，
url:'Mailinglist/ajax\u listmail'，
cache:false，
数据：{id:valu}，
成功：功能（msg）
{
如果（消息！=''）
{
$modal.modal（'show'）；
$（“.modal-data2”）.html（msg）；
}
}
});
});

单击按钮时使用下面的代码删除模式。。。。。在得到结果后单击函数，将打开ModalTransks！它起作用了，但是为什么模态的css是混乱的呢？您好，您可以根据您的要求来设计它，无需担心，这只是一次课堂布置失误，呵呵，我刚刚更改了$（“.modal-data2”）.html（msg）；至$（“.modal content”）.html（msg）；非常感谢D:D
<button type="button" id="view-button" class="btn btn-success" data-row="<?php echo $milis['id'];?>" data-toggle="modal" data-target=".email-modal"><i class="fa fa-eye" ></i></button>

$(document).ready(function(){
  $("#view-button").click(function(e){

      var id = e.target.getAttribute("data-row");
      alert(id);
      $('.loading').show();
      $.ajax({
        type:'POST',
        cache:false,
        url:'<?php echo base_url();?>Mailinglist/ajax_listemail',
        data:{id:id},
        success:function(data){
          $('.loading').hide();
          $('.modal-content').html(data);

        },
        async:false
      });


  });

});