Cannot add dynamic bootstrap select to table

Question

I'm trying to add a bootstrap-select dynamically in a table defined as follow:

<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="select0">
                                    <option>opt1</option>
                                     <option>opt2</option>
                                    </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2"><a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>

Essentially my script create new row to that table when the user press a button. The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?

This is the js code:

 $(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });



   $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
   });


    });

and this is a working fiddle.

Answer 1

I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/

The code is included below.

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    $('#select'+counter).selectpicker();
    counter++;
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="criteria0">
          <option>opt1</option>
          <option>opt2</option>
        </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2">
        <a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>