Dropdown search not worked when add new row

Question

I want to added dropdown search for quick search and select. Initially one row is define. Here dropdown search is work fine. But after completing this row want to add new row. it added but this time dropdown search is not working.

Code is here

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

Add New Row

$('.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);
};

Initial Row

When Add new row