title: Bootstrap dynamic input selection - multiple on same page
body: <p>I'm trying to use this Bootstrap snippet:
  <a href="http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-new-field-on-focus-or-change" rel="nofollow">http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-new-field-on-focus-or-change</a></p>
  
  <p>I'm using it in 2 different modal dialogs on the same page. </p>
  
  <p>I implement it as they suggest on the link above:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h3&gt;Selects&lt;/h3&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group form-group-multiple-selects col-xs-11 col-sm-8 col-md-4"&gt;
              &lt;div class="input-group input-group-multiple-select col-xs-12"&gt;
                  &lt;select class="form-control" name="values[]"&gt;
                      &lt;option value=""&gt;Select one&lt;/option&gt;
                      &lt;option value="1"&gt;Option 1&lt;/option&gt;
                      &lt;option value="2"&gt;Option 2&lt;/option&gt;
                      &lt;option value="3"&gt;Option 3&lt;/option&gt;
                      &lt;option value="4"&gt;Option 4&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;span class="input-group-addon input-group-addon-remove"&gt;
                      &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>/* 
      Text fields 
  */
  $(function(){
      $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){
          var sInputGroupHtml = $(this).parent().html();
          var sInputGroupClasses = $(this).parent().attr('class');
          $(this).parent().parent().append('&lt;div class="'+sInputGroupClasses+'"&gt;'+sInputGroupHtml+'&lt;/div&gt;');
      });
  
      $(document).on('click', 'div.form-group-options .input-group-addon-remove', function(){
          $(this).parent().remove();
      });
  });
  
  /* 
      Selects 
  */
  $(function(){
  
      var values = new Array();
  
      $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function(){
  
          var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length;
          var optionsLength = ($(this).find('option').length)-1;
  
          if(selectsLength &lt; optionsLength){
              var sInputGroupHtml = $(this).parent().html();
              var sInputGroupClasses = $(this).parent().attr('class');
              $(this).parent().parent().append('&lt;div class="'+sInputGroupClasses+'"&gt;'+sInputGroupHtml+'&lt;/div&gt;');  
          }
  
          updateValues();
  
      });
  
      $(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:not(:last-child) select', function(){
  
          updateValues();
  
      });
  
      $(document).on('click', '.input-group-addon-remove', function(){
          $(this).parent().remove();
          updateValues();
      });
  
      function updateValues()
      {
          values = new Array();
          $('.form-group-multiple-selects .input-group-multiple-select select').each(function(){
              var value = $(this).val();
              if(value != 0 &amp;&amp; value != ""){
                  values.push(value);
              }
          });
  
          $('.form-group-multiple-selects .input-group-multiple-select select').find('option').each(function(){
              var optionValue = $(this).val();
              var selectValue = $(this).parent().val();
              if(in_array(optionValue,values)!= -1 &amp;&amp; selectValue != optionValue)
              {
                  $(this).attr('disabled', 'disabled');
              }
              else
              {
                  $(this).removeAttr('disabled');
              }
          });
      }
  
      function in_array(needle, haystack){
          var found = 0;
          for (var i=0, length=haystack.length;i&lt;length;i++) {
              if (haystack[i] == needle) return i;
              found++;
          }
          return -1;
      }
  });
  </code></pre>
  
  <p>This works completely as expected, when only using it once on a page. But when using it 2 times on the same page, they conflict and does not work correct. I tried changing all the id's to idname2 (with a 2 at the end) and did a copy of the entire javascript replacing all the id names with 2 at the end as well. While this works, it also seams like a very bad way of implementing this.</p>
  
  <p>Can you help me figure out how I could implement it, so that I can use this snipped at least 2 times on the same page? Any help will be very appreciated. </p>