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

我已经创建了一个带有添加和删除按钮的动态html表。当我单击“添加”按钮时，一个带有组合框的新行被插入到表中。当我更改组合框（组合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);
      });
    }
  });
});

$（'t#u bag'）。关于（'change'，'i#u d_bag'，函数（e）{
var id_bg=$（this.parent（）.find（'option:selected'）.val（）；
$.ajax（{type:“POST”，
数据类型：“json”，
数据：{id:id_bg}，
url:“”，
成功：函数（数据）{
var opsi=“”；
$。每个（数据、功能（索引、项目）{
opsi+=“”+项目。nama_lengkap+“”；
});
$（'#t#u bag t body tr'）。每个（函数（）{
if（$（this）.parent（）.find（'option:selected'）.val（）！=“*”）{
$（this.parent（）.find（'#i_pic'）.show（）；
}
$（this）.closest（'tr'）.find（'i#u pic'）.html（opsi）；
});
}
});
});