title: FormValidation adding dynamic fields creating double bootstrap selects
body: <p>I am using formValidation plugin and adding dynamic fields with it.</p>
  
  <p>Right now, when I click add, the bootstrap-select is refreshed, but it keeps adding two of the select dropdown.</p>
  
  <p><a href="https://i.stack.imgur.com/RE9SN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RE9SN.jpg" alt="enter image description here"></a></p>
  
  <p>If somebody can point me in the right direction, would be helpful!</p>
  
  <h2>JS</h2>
  
  <pre><code>// Add work experience handler
              .on('click', '.addWork', function() {
              workindex++;
              var $template = $('#userWork'),
                  $clone    = $template
              .clone()
              .removeClass('hide')
              .removeAttr('id')
              .appendTo($("#workAppendContainer"));
  
              // Update the name attributes
              $clone
                  .find('[name="year"]').attr('name', 'userWorkDuration[]').end()
                  .find('[name="worklocation"]').attr('name', 'userWorkLocation[]').end()
                  .find('[name="workdescription"]').attr('name', 'userWorkDescription[]').end()
                  .find('[name="workpositionname"]').attr('name', 'userWorkName[]').end();
  
              // Add new fields
              // Note that we also pass the validator rules for new field as the third parameter
              $('#rootwizard')
                  .formValidation('addField', 'userWorkDuration[]')
                  .formValidation('addField', 'userWorkLocation[]')
                  .formValidation('addField', 'userWorkDescription[]')
                  .formValidation('addField', 'userWorkName[]');
  
              $('.durationSelect').selectpicker('refresh');
  
          })
  </code></pre>
  
  <h2>Here is the template I am using to clone and the container</h2>
  
  <pre><code>&lt;div class="form-group hide" id="userWork"&gt;
          &lt;div class="row" style="margin-top:15px;"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="col-md-6" style="padding-left: 0px;"&gt;
                        &lt;label&gt;Algus&lt;/label&gt;
                          &lt;div class="form-group form-group-custom"&gt;
                          &lt;select class="durationSelect selectpicker" data-live-search="true"  name="year"&gt;
                            &lt;optgroup class="userWorkYear"&gt;
                              &lt;option disabled selected value=""&gt;
                                  Vali kestvus
                              &lt;/option&gt; 
                              &lt;option value="-3"&gt;Vähem kui kolm kuud&lt;/option&gt;  
                              &lt;option value="3 kuud"&gt;3 kuud&lt;/option&gt;
                              &lt;option value="6 kuud"&gt;6 kuud&lt;/option&gt;
                              &lt;option value="9 kuud"&gt;9 kuud&lt;/option&gt;
                              &lt;option value="1 aasta"&gt;1 aasta&lt;/option&gt;
                              &lt;option value="2 aastat"&gt;2 aastat&lt;/option&gt;
                              &lt;option value="3 aastat"&gt;3 aastat&lt;/option&gt;
                              &lt;option value="3+"&gt;Rohkem kui 3 aastat&lt;/option&gt;
                            &lt;/optgroup&gt;
                          &lt;/select&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
     &lt;div id="workAppendContainer"&gt;
      &lt;/div&gt;
  </code></pre>