title: combobox result reset when change next combobox in dynamic html table
body: <p>I've created a dynamic html table with add and remove button. When I click 'add' button, a new row with combo box is inserted to the table. When I change the combo box (combo 1), another combo box (combo 2) based on combo 1 appear in the next column. Everything was fine until i add a new row. When I change combo 1 in the second row, the result of combo 2 in the first row is reset to default. Please help me solve this problem</p>
  
  <p>This is what i've tried so far:</p>
  
  <pre><code>$('#t_bag').on('change', '#i_d_bag', function(e){
    var id_bg = $(this).parent().find('option:selected').val();
    $.ajax({type : "POST",
            dataType : "json",
            data : {id : id_bg},
            url : "&lt;?php echo site_url('con_surat/combo_pic_dist'); ?&gt;",
            success : function(data){ 
        var opsi  = '';
        $.each(data,function(index,items){
          opsi +="&lt;option value ="+items.nip+"&gt;"+items.nama_lengkap+"&lt;/option&gt;";
        });
        $('#t_bag tbody tr').each(function() {
          if($(this).parent().find('option:selected').val() != "*") {
            $(this).parent().find('#i_pic').show();
          }
          $(this).closest('tr').find('#i_pic').html(opsi);
        });
      }
    });
  });
  </code></pre>