Поиск в раскрывающемся списке не работает при добавлении новой строки

Question

Я хочу добавить выпадающий поиск для быстрого поиска и выбрать. Первоначально один ряд определен. Здесь выпадающий поиск работает нормально. Но после завершения этой строки хочу добавить новую строку. он добавлен, но на этот раз поиск в раскрывающемся списке не работает.

Код здесь

css css

Initial Row

<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);
};

Начальная строка

При добавлении новой строки