如何使用jquery动态地自动填充添加/删除字段？

我正在用laravel做一个程序。我在jquery中使用add/remove字段。第一个字段从数据库中获取数据，列出此人的姓名

     <div class="container table-responsive col-lg-10">
          <form method="post" id="dynamic_form">
            <span id="result"></span>
             <table class="table table-hover table-responsive table-bordered" id="user_table">
           <thead>
            <tr>
                <td class="text-center col-lg-3">Nama</th>
                <td class="text-center col-lg-2">No Personal</th>
                <td class="text-center col-lg-1">Jabatan</th>
                <td class="text-center col-lg-1">Telefon</th>
                <td class="text-center col-lg-1">Ext</th>
                <td class="text-center col-lg-1">Action</th>
            </tr>
           </thead>
           <tbody>

           </tbody>
           <tfoot>
            <tr>
              <td colspan="2" align="right">&nbsp;</td>
              <td></td>
            </tr>
           </tfoot>
       </table>
    </div>  
    <script>
      $(document).ready(function(){

      var count = 1;

      dynamic_field(count);

      function dynamic_field(number)
      {
      html = '<tr>';
     html += '<td><select id="nama" name="nama[]" class="form-control"><option value="">--Pilih--</option><?php foreach($staff as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
    html += '<td><input type="text" name="no_personal[]" class="form-control" /></td>';
    html += '<td><input type="text" name="jabatan[]" class="form-control" /></td>';
    html += '<td><input type="text" name="telefon[]" class="form-control" /></td>';
    html += '<td><input type="text" name="ext[]" class="form-control" /></td>';
    if(number > 1)
    {
        html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
        $('tbody').append(html);
    }
    else
    {   
        html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah Pegawai</button></td></tr>';
        $('tbody').html(html);
    }
}

   $(document).on('change', '.nama', function(){
    var staffID = jQuery(this).val();
    if(staffID)
    {
      jQuery.ajax({
          url : 'add_demo/get_staff/'+staffID,
          type : "GET",
          dataType : "json",
          success:function(data)
          {
            console.log(data);
                $('#no_personal').val(data.Nobadan);
                $('#jabatan').val(data.SectionID);
                $('#telefon').val(data.notelttp);
                $('#ext').val(data.ext);   
          }
      });
    }
    else
    {
      $('#no_personal').empty();
      $('#jabatan').empty();
      $('#telefon').empty();
      $('#ext').empty();
    }
  });


 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
  });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

});
</script>

其控制器为：

$data = staffs::where('staffID', $staffID)
            ->select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
            ->first();

return json_encode($data);

我可以在选择框中列出员工姓名。但是，当我选择员工姓名时，信息没有填入字段中

该字段已被赋予如下id：

 html += '<td><input id="nb_'+ count++ +'" type="text" name="no_badan[]" class="form-control" /></td>';

html+=''；

如何即兴编写代码？我试图在添加的字段中添加id，但它为添加的字段提供了相同id名称的错误

建议： 请检查id，它不是唯一的

使用适当的计数来增加ID

---

创建这样的组件有最简单的方法。请看我下面给出的代码片段

$（文档）.on（'click'，'add'，function（））{
var clonned=$（this）.parents（'.clonable:last child'）.clone（）；
parentId=clonned.attr（'parentId'）；
clonned.attr（'parentId'，parseInt（parentId）+1）；
clonned.find（'input[type=“text”]”）。每个（函数（）{
返回$（this.val（“”）；
})
$（'.clonable'）.parents（'tbody'）.append（clonned）；
});
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'.clonable'）.remove（）；
});
$（document）.on（'change'，'.nama'，function（）{
var staffID=$（this.val（）；
var parentId=$（this.parents（'.clonable'）.attr（'parentId'）；
如果（斯塔夫）{
jQuery.ajax({
url:'add_demo/get_staff/'+staffID，
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
$（'tr[parentId=“”+parentId+”]输入[name=“no_personal[]”）val（data.Nobadan）；
$（'tr[parentId=“”+parentId+”]input[name=“jabatan[]”]）.val（data.SectionID）；
$（'tr[parentId=“”+parentId+”]输入[name=“telefon[]”]）.val（data.notelttp）；
$（'tr[parentId=“”+parentId+”]input[name=“ext[]”]）.val（data.ext）；
}
});
}否则{
$（'tr[parentId=“”+parentId+”]输入[name=“no_personal[]”]）.val（“”）；
$（'tr[parentId=“”+parentId+”]输入[name=“jabatan[]”]）.val（“”）；
$（'tr[parentId=“”+parentId+”]输入[name=“telefon[]”]）.val（“”）；
$（'tr[parentId=“”+parentId+”]输入[name=“ext[]”]）.val（“”）；
}
});
.clonable.add{
显示：无；
}
.clonable:最后一个子项。添加{
显示：内联块！重要；
}
.clonable:独生子女。删除{
显示：无！重要；
}

纳米
没有私人的
贾巴坦
电传
提取
行动
--皮利--
为什么会出现此错误？控制台中的同一字段似乎有14个字段。您还需要使用更改方法添加计数，就像您将值传递给所选字段一样<代码>$（'nb#u'+count）.val（data.Nobadan）就像这样等等…问题是，您正在使字段成为动态的，但是您使用的下拉列表对所有字段都是相同的，您也需要使其成为动态的，这样当您调用ajax时，它对每个附加行都是动态的。通过此过程，您还可以将值放入动态字段。就像我在上面的评论中所做的。让我们一起来。谢谢你的建议。id是唯一的，但是控制台显示了一些重复（我不知道为什么）。我搜索了好几个星期，用class代替id。
$data = staffs::where('staffID', $staffID)
            ->select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
            ->first();

return json_encode($data);

 html += '<td><input id="nb_'+ count++ +'" type="text" name="no_badan[]" class="form-control" /></td>';