title: Bootstrap SelectPicker duplicates select lists on initialization
body: <p>After dynamically creating select lists using javascript by cloning html, and after the select list creation, the attempt to initialize the select lists using <code>$(MySelectList).selectPicker();</code> seems to succed but also after calling <code>.selectPicker()</code> it seems to duplicate several of the selects. </p>
  
  <p>Without the <code>.selectPicker()</code> call, there are three drop down lists in the cloned row, but you can not change the values (the lists do open, but selections don't take the values).</p>
  
  <p>After calling <code>.selectPicker()</code>, the new row's drop downs take selected values, but there are now 5 total select lists. Two additional lists which are dup's. </p>
  
  <p>This is really all there is to it:</p>
  
  <pre><code> &lt;div id="advSearchRows" class="clearfix"&gt;
  
      &lt;!-- Form Row Template --&gt;
  
      &lt;div class="row clone" id="ASR1"&gt;
          &lt;div class="form-group"&gt;
              &lt;select class="selectpicker include"&gt;
                  &lt;option&gt;Must Include&lt;/option&gt;
                  &lt;option&gt;Must NOT Include&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;select class="selectpicker match"&gt;
                  &lt;option id="-1"&gt;foo&lt;/option&gt;
                  &lt;option id="0"&gt;bar&lt;/option&gt;
                  &lt;option id="1"&gt;fubar!&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="text" class="search-text form-control" placeholder="Keyword Text"&gt;
          &lt;/div&gt;
          &lt;div class="form-group remove hidden"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the row duplicate code</p>
  
  <pre><code>var numRows = $("#advSearchRows .clone").length;        // how many rows currently
      var lastRow = $("#advSearchRows .clone:last");          // the last row in the list
      var lastId = lastRow.attr("id").replace("ASR", "");     // the id of the last item
      if(numRows &lt; 5) { // duplicate (clone) template row:     
          var id = parseInt(lastId) + 1;                      // the numeric id of the new row
          var newRow = lastRow.clone().attr("id", id);        // actual cloned row
          newRow.find("select.include")
              .attr("id", "include" + id)
              .selectpicker(); // include ddl id
          newRow.find("select.match")
              .attr("id", "match" + id)
              .selectpicker();     // match ddl id
          newRow.insertAfter("div.clone:last").slideDown('slow');
          $("#" + id).find(".remove").removeClass("hidden");
  </code></pre>
  
  <p>I wonder if there is something wrong with my selector...  <code>newRow.find("select.match").attr("id", "match" + id).selectpicker()</code> but it looks proper according to the documentation... maybe there is something I am missing. </p>