Clone Bootstrap-select in the same page

Question

I'm trying to clone bootstrap select field, but after cloning it, cloned select do not select anything.

This is my markup:

     <div class="form-group car-list">
         <label class="col-md-3 control-label">Select car #1</label>
         <div class="col-md-9">
            <div class="input-group">
               <select  class="select-car" data-live-search="true">
                  <option></option>
                  <option value="1">option 1</option>
                  <option value="2">option 2</option>
               </select>
            </div>
        </div>
    </div>

And my js:

$(document).ready(function() {
    $('.select-car').selectpicker();
});

$('#add').click(function () {
    var n = $('.car-list').length + 1;
    var temp = $('.form-group:last').clone(true);
    $('.control-label:first', temp).html('Select car #' + n);
    $('.form-group:last').after(temp);
});

I try to use selectpicker refresh command: the result was that I had the second selectpicker inside cloned div.

Answer 1

Working Fiddle.

You could use a select model called in every clone, then init the select after the clone like the snippet below shown :

$('#add').click(function() {
    var n = $('.car-list').length + 1;
    var temp = $('.form-group:last').clone(true).removeClass('select-car');
    $('.control-label:first', temp).html('Select car #' + n);
    $('.input-group', temp).html($('#select-model').html());
    $('.select-car', temp).selectpicker();

    $('.form-group:last').after(temp);
});

Runnable snippet:

$('#add').click(function() {
  var n = $('.car-list').length + 1;
  var temp = $('.form-group:last').clone(true).removeClass('select-car');
  $('.control-label:first', temp).html('Select car #' + n);
  $('.input-group', temp).html($('#select-model').html());
  $('.select-car', temp).selectpicker();

  $('.form-group:last').after(temp);
});

.category {
  margin-left: -12px;
  font-size: 1.3em;
  /*safari won't respect many/any of these but color?*/
  /*font-style: italic;*/
  font-weight: bold !important;
  color: #000000 !important;
  /*straight black makes it pop*/
  /*background: #000;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>


<div class="form-group car-list">
  <label class="col-md-3 control-label">Select car #1</label>
  <div class="col-md-9">
    <div class="input-group">
      <select class="select-car selectpicker" data-live-search="true">
        <option></option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
      </select>
    </div>
  </div>
</div>

<div id="select-model" class="hide">
  <select class="select-car" data-live-search="true">
    <option></option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
  </select>
</div>
<button id="add">Add</button>