title: How to display a field automatically after selecting an option in a multiple insert
body: <p>When I choose an option in 'Nama Bahan', it would automatically fill the <code>stok</code> field by the <code>total_bahan</code> (based on the data which is stored in a database).</p>
  <p>The problem is the script doesn't run correctly when I add multiple inserts, as in the picture, it just runs in the first row, but when I choose an option in the second or third row, the <code>stok</code> column is still blank. How should it be?</p>
  <p><img src="https://i.stack.imgur.com/DwwSk.png" alt="CLICK TO SEE THE PICTURE" /></p>
  <p>Here is the script:</p>
  <pre><code>&lt;script src=&quot;&lt;?= base_url('assets/'); ?&gt;vendor/jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
     $(document).ready(function(){
        var i =1;
        $('#add').click(function(){
          i++;
  
          $('#dynamic_field').append('&lt;tr id=&quot;row'+i+'&quot;&gt; &lt;td&gt;&lt;select name=&quot;bhn_id[]&quot; id=&quot;bhn_id&quot; class=&quot;form-control form-control-sm bhn_id&quot;&gt;&lt;option value=&quot;&quot;&gt;-- Pilih Bahan --&lt;/option&gt;&lt;?php foreach ($data_bahan-&gt;result_array() as $key =&gt; $tb_bahan) : ?&gt;
                              &lt;option data-id=&quot;&lt;?=$tb_bahan['stok'] ?&gt;&quot; value=&quot;&lt;?=$tb_bahan['id_bhn'] ?&gt;&quot;&gt;&lt;?= $tb_bahan['nm_bhn']. &quot;  &quot;. &quot;(&quot;. $tb_bahan['nm_satuan'] . &quot;)&quot; . &quot;(&quot;. $tb_bahan['stok'] . &quot;)&quot; ?&gt;&lt;/option&gt;&lt;?php endforeach; ?&gt;
                                &lt;?= form_error('bhn_id', '&lt;small class=&quot;text-danger&quot;&gt;', '&lt;/small&gt;'); ?&gt;
                            &lt;/select&gt;&lt;?= form_error('bhn_id', '&lt;small class=&quot;text-danger&quot;&gt;', '&lt;/small&gt;'); ?&gt;&lt;/td&gt;&lt;td width=&quot;100&quot;&gt;&lt;input type=&quot;number&quot; class=&quot;form-control form-control-sm jlh_keluar&quot;  name=&quot;jlh_keluar[]&quot; id=&quot;jlh_keluar&quot; value=&quot;&lt;?= set_value('jlh_keluar'); ?&gt;&quot;&gt;&lt;/td&gt;&lt;td width=&quot;100&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;form-control form-control-sm stok&quot;  name=&quot;stok[]&quot; id=&quot;stok&quot; readonly value=&quot;&lt;?= set_value('stok'); ?&gt;&quot;&gt;&lt;/td&gt;&lt;td align=&quot;center&quot; width=&quot;100&quot;&gt;&lt;button type=&quot;button&quot; name=&quot;remove&quot; id=&quot;'+i+'&quot; class=&quot;btn btn-outline-danger btn-sm btn_remove&quot;&gt;x&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
  
          });
      
      $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr(&quot;id&quot;);
        $(&quot;#row&quot;+button_id+&quot;&quot;).remove();
        });
      $(document).on('submit', '#add_jenis', function(){
        $.ajax({
          url:&quot;&lt;?= base_url('m_form_bahan_keluar/tambah');?&gt;&quot;,
          method:&quot;POST&quot;,
          data:$('#add_jenis').serialize(),
          success:function(data)
          {
            $('#add_jenis')[0].reset(&quot;&quot;);
          }
        });
      });
  
     });
  &lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
    $('#bhn_id').change(function(){
      var part = $(this).children(&quot;option:selected&quot;).data('id');
      $('#stok').val(part);
    });
  });
  &lt;/script&gt;
  </code></pre>