添加新行时下拉搜索不起作用

Question

我想添加下拉搜索以进行快速搜索并选择。最初定义一行。在这里，下拉搜索可以正常工作。但是在完成这一行之后要添加新行。它添加了，但是这次下拉搜索不起作用。

代码在这里

css css

初始行

<tr>
                            <td>
                                <select id="category" class="form-control form-control-sm select2">
                                    <option selected="false"  disabled>Category</option>
                                    @foreach($types as $type)
                                    <option value="{{$type->id}}">{{$type->name}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <!-- <select id="generic" class="form-control form-control-sm selectpicker show-tick" data-live-search="true"> -->
                                <select id="generic" class="form-control form-control-sm select2" data-live-search="true">
                                    <option selected="false"  disabled>Generic</option>
                                    @foreach($generics as $generic)
                                    <option value="{{$generic->id}}">{{$generic->name}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <select name="cmbMedicine[]" id="med" class="form-control form-control-sm duplicat select2">
                                    <option selected="false"  disabled>Medicine</option>
                                </select>
                            </td>
</tr

js

添加新行

$('.addRow').click(function() {
  addRow();
});
function addRow(){
  var addRow = '<tr>'+
                  '<td>'+
                      '<select name="cmbProductCategory" id="category" class="form-control form-control-sm select2">'+
                            '<option selected="false" disabled>Category</option>'+
                            '@foreach($types as $type)'+
                            '<option value="{{$type->id}}">{{$type->name}}</option>'+
                            '@endforeach'+
                      '</select>'+
                  '</td>'+
                  '<td>'+
                      '<select name="cmbProductCategory" id="generic" class="form-control form-control-sm select3">'+
                            '<option selected="false" disabled>Generic</option>'+
                            '@foreach($generics as $generic)'+
                            '<option value="{{$generic->id}}">{{$generic->name}}</option>'+
                            '@endforeach'+
                      '</select>'+
                  '</td>'+
                  '<td>'+
                      '<select name="cmbProductInfo[]" id="medName" class="form-control duplicat select3">'+
                            '<option selected="false" disabled>Medicine</option>'+
                      '</select>'+
                  '</td>';
  $('tbody').prepend(addRow);
};

初始行

添加新行时