title: How to make autofill into add/remove field dynamically using jquery?
body: <p>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.</p>
  
  <pre><code>     &lt;div class="container table-responsive col-lg-10"&gt;
            &lt;form method="post" id="dynamic_form"&gt;
              &lt;span id="result"&gt;&lt;/span&gt;
               &lt;table class="table table-hover table-responsive table-bordered" id="user_table"&gt;
             &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td class="text-center col-lg-3"&gt;Nama&lt;/th&gt;
                  &lt;td class="text-center col-lg-2"&gt;No Personal&lt;/th&gt;
                  &lt;td class="text-center col-lg-1"&gt;Jabatan&lt;/th&gt;
                  &lt;td class="text-center col-lg-1"&gt;Telefon&lt;/th&gt;
                  &lt;td class="text-center col-lg-1"&gt;Ext&lt;/th&gt;
                  &lt;td class="text-center col-lg-1"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
  
             &lt;/tbody&gt;
             &lt;tfoot&gt;
              &lt;tr&gt;
                &lt;td colspan="2" align="right"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
             &lt;/tfoot&gt;
         &lt;/table&gt;
      &lt;/div&gt;  
      &lt;script&gt;
        $(document).ready(function(){
  
        var count = 1;
  
        dynamic_field(count);
  
        function dynamic_field(number)
        {
        html = '&lt;tr&gt;';
       html += '&lt;td&gt;&lt;select id="nama" name="nama[]" class="form-control"&gt;&lt;option value=""&gt;--Pilih--&lt;/option&gt;&lt;?php foreach($staff as $key =&gt; $value):echo '&lt;option value="'.$key.'"&gt;'.addslashes($value).'&lt;/option&gt;'; endforeach; ?&gt;&lt;/select&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" name="no_personal[]" class="form-control" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" name="jabatan[]" class="form-control" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" name="telefon[]" class="form-control" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input type="text" name="ext[]" class="form-control" /&gt;&lt;/td&gt;';
      if(number &gt; 1)
      {
          html += '&lt;td class="text-center"&gt;&lt;button type="button" name="remove" id="" class="btn btn-danger remove"&gt;Batal&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
          $('tbody').append(html);
      }
      else
      {   
          html += '&lt;td class="text-center"&gt;&lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Tambah Pegawai&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
          $('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();
   });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I had edited the js code:</p>
  
  <pre><code>    function dynamic_field(number)
   {
    html = '&lt;tr&gt;';
       html += '&lt;td&gt;&lt;select id="nama_'+ count +'" name="nama[]" class="form-control"&gt;&lt;option value=""&gt;Pilih&lt;/option&gt;&lt;?php foreach($pegawai as $key =&gt; $value):echo '&lt;option value="'.$key.'"&gt;'.addslashes($value).'&lt;/option&gt;'; endforeach; ?&gt;&lt;/select&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input id="nb_'+ count +'" type="text" name="no_badan[]" class="form-control"  value="nb_'+ count +'" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input id="sek_'+ count +'" type="text" name="seksyen[]" class="form-control" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input id="tel_'+ count +'" type="text" name="telefon[]" class="form-control" /&gt;&lt;/td&gt;';
      html += '&lt;td&gt;&lt;input id="ext_'+ count +'" type="text" name="ext[]" class="form-control" /&gt;&lt;/td&gt;';
      if(number &gt; 1)
      {
          html += '&lt;td class="text-center"&gt;&lt;button type="button" name="remove" id="" class="btn btn-danger remove"&gt;Batal&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
          $('tbody').append(html);
      }
      else
      {   
          html += '&lt;td class="text-center"&gt;&lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Tambah&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
          $('tbody').html(html);
      }
   }
  
   $(document).on('change', '.nama_'+ count +'', function(){
      var staffID = jQuery(this).val();
      if(staffID)
      {
        jQuery.ajax({
            url : 'add_demo/get_sta/'+staffID,
            type : "GET",
            dataType : "json",
            success:function(data)
            {
              console.log(data);
                  $('#nb_'+ count +'').val(data.Nobadan);
                  $('#seksyen').val(data.SectionID);
                  $('#telefon').val(data.notelttp);
                  $('#ext').val(data.ext);   
            }
        });
      }
      else
      {
        $('#nb_'+ count +'').empty();
        $('#seksyen').empty();
        $('#telefon').empty();
        $('#ext').empty();
      }
    });
  
  
    $(document).on('click', '#add', function(){
     count++;
     dynamic_field(count);
   });
  
    $(document).on('click', '.remove', function(){
    count--;
    $(this).closest("tr").remove();
    });
  
    });
   &lt;/script&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code> url : 'add_demo/get_staff/'+staffID,
  </code></pre>
  
  <p>The controller for that is:</p>
  
  <pre><code>$data = staffs::where('staffID', $staffID)
              -&gt;select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
              -&gt;first();
  
  return json_encode($data);
  </code></pre>
  
  <p>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.</p>
  
  <p>The field had been given an id like this:</p>
  
  <pre><code> html += '&lt;td&gt;&lt;input id="nb_'+ count++ +'" type="text" name="no_badan[]" class="form-control" /&gt;&lt;/td&gt;';
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/Q7d4F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q7d4F.png" alt="dom error"></a></p>