在动态html表中更改下一个组合框时，组合框结果重置

Question

我已经创建了一个带有添加和删除按钮的动态html表。当我点击“添加＆＃39;按钮，一个带有组合框的新行被插入到表中。当我更改组合框（组合1）时，基于组合1的另一个组合框（组合2）出现在下一列中。一切都很好，直到我添加一个新行。当我在第二行中更改组合1时，第一行中组合2的结果将重置为默认值。请帮我解决这个问题

这是我迄今为止所尝试过的：

$('#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 : "<?php echo site_url('con_surat/combo_pic_dist'); ?>",
          success : function(data){ 
      var opsi  = '';
      $.each(data,function(index,items){
        opsi +="<option value ="+items.nip+">"+items.nama_lengkap+"</option>";
      });
      $('#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);
      });
    }
  });
});