How to insert searchable select box in table row?

Question

Here in the table I have used searchable select below item name. On clicking add item button above the new row is inserted by default values. But what happens is select in first row only works while in second row dropdown menu of select option does not open.

I think the problem comes that I am unable to assign different ids to the select.

<!-- searchable select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- searchable select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Function of Add Item

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

          var newcell = row.insertCell(i);

          newcell.innerHTML = table.rows[0].cells[i].innerHTML;

          switch(newcell.childNodes[0].type) {
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                newcell.childNodes[0].id = "aa"+rowCount;
                break;
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;

          }

        }
      }

Select HTML

[![<td>

 <select type="select-one" class="selectpicker" data-width="fit" data-live-search="true" data-container="body" data-show-subtext="true" name="item_details[]">
    <option value="1"> Computer </option>
    <option value="2"> Laptop </option>
    <option value="3"> Mouse </option>
    <option value="4"> Keyboard </option>
    <option value="5"> Writer </option>
  </select>

</td>][2]][2]

Answer 1

After adding your select HTML to the DOM, you will need to refresh the select picker

More here http://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

$(".selectpicker").selectpicker('refresh');

Use might need to change the selector.

Answer 2

So here what I have used clone method to accomplish this task. And below is the addRow() function that I have changed.

addRow() Function with clone method of jquery.

function addRow() {

    var row = $('.new_item_row').last();

    var item_row_clone = $('.new_item_row').last().clone();
    item_row_clone.find('input[type=text]').val('');
    item_row_clone.find('input[type=checkbox]').prop('checked', false);
    item_row_clone.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
    item_row_clone.find('.selectpicker').selectpicker();
    row.after(item_row_clone);

}