Javascript 克隆具有相关下拉列表的表行时出现问题

我有一个带有从属下拉列表的表。当我选择第一行时，它将为我提供所选项目的值，但当我添加更多行并从下拉列表中选择项目时，它将为我提供第一行的值

这是我克隆行的js代码

  <script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
      $('#products tbody>tr:last').clone(true).insertAfter('#products tbody>tr:last');
        //$("#products tbody>tr:last").each(function() {this.reset();});  
      return false;
    });
});

这是我的html代码

<table id="products" align="center" class="bordered">
<thead>
    <tr><th>Item Name</th>
    <th>Action</th></tr>
</thead>
<tbody>
    <tr>
        <td><?php echo form_dropdown('product',$product,null,'id="pid[]" onChange="showData(this.value);"');?></td>
        <td>
            <button id="add">+</button>
        </td>
    </tr>
</tbody>

项目名称
行动
尝试对动态添加的元素使用，如

$('#products').on('change','#pid[]', function(){ // use class instead of id #pid[]
    alert('id'+this.value);
});

当您克隆最后一个tr时，它也是克隆button的id。因此，当您单击第二个按钮时，它引用的是第一个id。
Id不应与w3c建议相同。在您的代码中，按钮和下拉列表不需要id和类，请检查此JSFIDLE


您也可以参考下面的代码，以获得下拉列表，无需showData（）函数

非常感谢它帮了我很多忙。你能告诉我如何删除一行吗？当我添加第二行并选择第一个单元格上显示值的项时，会出现另一个问题，将第二个id更改为class second并更新代码：$（this.parents（'tr'）.find（.second”）.html（pid）；：：请参阅更新的小提琴：
$('#products').on('change','#pid[]', function(){ // use class instead of id #pid[]
    alert('id'+this.value);
});

$("#products tbody>tr").on('change','select',function() {
 var pid = $(this).val();
 //xmlhttp.open("GET","viewData?nid="+str+"&pid="+pid,true);
 //xmlhttp.send();
 alert(pid);
});