title: dynamic ajax form select box autofill
body: <p>I'm strugglin to make a PHP Form with Dynamic Fields with Auto Fill other fields in JQuery, so far I can add new fields and the autofill works just fine but only for the first field.</p>
  
  <p><a href="https://i.stack.imgur.com/94NNR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/94NNR.jpg" alt="enter image description here"></a></p>
  
  <p>The autofill drop down only appears on the first input. 
  How can I make all dynamic form input work with the autofill?
  For example I have 2 fields. Items_name and Total_stock in dynamic form. I want to if I select Items_name. Autofill for field total_stock.</p>
  
  <p>Here is my ajax code :</p>
  
  <pre><code>&lt;script language="javascript"&gt;
      function AddMasterDetail() {
              var idf = document.getElementById("idf").value;
              stre="&lt;div class='form-group'  id='srow" + idf + "'&gt;&lt;div class='controls'&gt;";
  
              stre=stre+" &lt;div class='col-xs-2'&gt;";
              stre=stre+"&lt;select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'&gt;"
                          +"&lt;option value='' disabled selected&gt;Please Select&lt;/option&gt;"
                          +"&lt;?php foreach($v_items_stock as $row){ echo "&lt;option value='$row-&gt;items_id'&gt;$row-&gt;items_name&lt;/option&gt;"; } ?&gt;&lt;/select&gt;";
              stre=stre+"&lt;/div&gt;";
  
              stre=stre+"&lt;div class='col-xs-2'&gt;";
              stre=stre+"&lt;input class='form-control input-sm' id='total_stock' placeholder='Total Stock'  name='total_stock[]' /&gt;";
              stre=stre+"&lt;/div&gt;";         
  
  
              stre=stre+"&lt;div class='col-xs-1'&gt; &lt;button type='button' class='btn btn-danger btn-sm' title='Hapus Rincian !' onclick='removeFormField(\"#srow" + idf + "\"); return false;'&gt;&lt;i class='glyphicon glyphicon-remove'&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;";
  
              $("#divItems").append(stre);    
              idf = (idf-1) + 2;
              document.getElementById("idf").value = idf;
          }
      function removeFormField(idf) {
              $(idf).remove();
          }
  
      function autofill(){
          var items_id = document.getElementById('items_id').value;
          $.ajax({
                 url:"&lt;?php echo base_url();?&gt;transaction_sending/cari",
                 data:'&amp;items_id='+items_id,
                 success:function(data){
                 var hasil = JSON.parse(data);  
  
          $.each(hasil, function(key,val){ 
  
          document.getElementById('items_id').value=val.items_id;
                 document.getElementById('total_stock').value=val.total_stock;
  
  
              });
          }
                 });
      }   
  
  &lt;/script&gt;
  </code></pre>