title: how to copy more than one jquery-multiselect element when button click?
body: <p>I have a button that are copying up/cloning a select-dropdown and using Choosen Jquery plugin and multiselect plugin. The first element shows perfect but the when i click the button and copy the elements i cant choose from the select list. so only the first instance of the form field works, and not the others added after.</p>
  
  <p>If i have diffrent IDs it will work, but same ID couses issiue. any help how to go around this is appricciated.</p>
  
  <pre><code>&lt;script&gt;                        
       $(document).ready(function(){
           $("#example").multiselect();
       });
  
      $(document).ready(function() {
  
          var max_fields = 20; //maximum input boxes allowed
  
          $(".add_field_button").click(function(e){ //on add input button click
              e.preventDefault();
  
              var add_button = $(this);
              var fieldset   = add_button.closest('fieldset');
              var wrapper    = add_button.closest('.sf-viewport');
              var form       = add_button.closest('form');
              var x          = parseInt(fieldset.attr('data-count'));
              //var cur_height = 0;
              var fieldset_clone;
              var fieldset_content;
  
              var viewport_height = 0;
              var fieldset_cont   = add_button.closest('.sf-step');
  
  
              if(x &lt; max_fields){ //max input box allowed
  
                  //text box increment
                  fieldset.attr('data-count',x+1);
  
                  console.log($(this).siblings().length);
  
                  var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).siblings().length-1);
  
                  viewport_height = wrapper.height()*1 + cur_height;
                  fieldset_cont.height( fieldset_cont.height()*1 +  cur_height );
                  wrapper.height(viewport_height);
  
  
                  fieldset_clone = add_button
                                  .closest('fieldset')
                                  .find('.fieldset-content')
                                  .eq(0)
                                  .clone();
  
                  fieldset_clone
                      .find('[name]')
                      .each(function(){
                          $(this).val($(this).prop('defaultValue'));
                      });
  
  
                  fieldset_content = $('&lt;div&gt;')
                      .addClass('lol')
                      .append(fieldset_clone.children());
  
  
                  add_button.before(fieldset_content);
  
                  // add remove button
                  add_remove_btn(fieldset_content);
  
              }
          });
  
  
          function add_remove_btn(item){
              item.prepend(
                  '&lt;a class="btn pull-right om-remove btn-danger" href="#"&gt;'+
                  '  &lt;div class="small" style="position:relative; z-index:999;"&gt;Slett tidsforbruk&lt;/div&gt;'+
                  '&lt;/a&gt;'
              );
          }
  
  
          //user click on remove text
          $(document).on("click",".om-remove", function(e){
  
              e.preventDefault();
  
              var x = parseInt($(this)
                  .closest('lol')
                  .attr('data-count')
              );
  
              $(this)
                  .closest('lol')
                  .attr('data-count',x-1);
  
              $(this)
                  .closest('.lol')            
                  .slideUp(function(){
                      $(this).remove()
              })
  
              var height = $(this).closest('lol').height();
              var add_button = $(this);
              var viewport_height = 0;
              var fieldset_cont   = add_button.closest('.sf-step');
              var wrapper    = add_button.closest('.sf-viewport');
              var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).parent().siblings().length-1);
  
              viewport_height = wrapper.height()*1 - cur_height;
              fieldset_cont.height( fieldset_cont.height()*1 -  cur_height );
              wrapper.height(viewport_height);
  
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The html</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;fieldset class="fieldset-language" data-count="1"&gt;
          &lt;div class="fieldset-content"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-5"&gt;
                      &lt;select data-placeholder="Choose" id="ny-matrett" tabindex="2" name="ing[]"&gt;
                          &lt;option value=""&gt;Test&lt;option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-5"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input name="gram[]" type="text" class="form-control"  placeholder="grams"&gt;
                          &lt;div class="input-group-addon"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2 lol"&gt;&lt;/div&gt;
              &lt;/div&gt;                                                  
              &lt;br&gt;&lt;br&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;button class="add_field_button btn btn-warning" data-fields="0" name="add"&gt;add&lt;/button&gt;    
          &lt;span style="float:right;"&gt;
              &lt;button type="submit" name="submit" class="btn btn-success"&gt;Save&lt;/button&gt;
          &lt;/span&gt;
      &lt;/fieldset&gt;     
  &lt;/div&gt;
  </code></pre>