How to make autofill into add/remove field dynamically using jquery?

I am doing a program using laravel. I use add/remove field with jquery. The first field grab the data from database to list out the person's name.

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

When the first field（staff name）selected，the information about no_personal, jabatan, telefon and ext will be filled automatically into the field. The information grabbed using this ajax url:

 url : 'add_demo/get_staff/'+staffID,

The controller for that is:

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

return json_encode($data);

I can list out the staff name in the selection box. But when I selected the staff name, the information is not filled into the fields.

How to improvised the code? I tried to put id in the added fields, but it gives error of same id name for added fields.

via Chebli Mohamed