title: Adding two identical select2 forms to same page
body: <p>I am trying to add two <a href="http://ivaynberg.github.io/select2/" rel="noreferrer">select2 multi-value select boxes</a> to my Rails app. </p>
  
  <p>The top form works fine, but the bottom one does not work. </p>
  
  <p>I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code># This one works fine
  &lt;div class="search_genre"&gt;Genre:&lt;/div&gt;
  &lt;div class="select2-container select2-container-multi populate"&gt;
      &lt;select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select"&gt;
         &lt;optgroup label="Popular"&gt;
             &lt;option value="Alt"&gt;Rock&lt;/option&gt;
             &lt;option value="Ind"&gt;Indie&lt;/option&gt;
             &lt;option value="Ind"&gt;Alternative&lt;/option&gt;
             &lt;option value="Ind"&gt;Acoustic&lt;/option&gt;
         &lt;/optgroup&gt;
        &lt;/select&gt;
  &lt;/div&gt;
  
  
  # This one doesn't show a text input or the optiongroup values
  &lt;div class="search_region"&gt;Region:&lt;/div&gt;
  &lt;div class="select2-container select2-container-multi populate"&gt;
      &lt;select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select"&gt;
         &lt;optgroup label="Local"&gt;
             &lt;option value="PDX"&gt;Greater Portland&lt;/option&gt;
             &lt;option value="OR"&gt;Oregon&lt;/option&gt;
             &lt;option value="WA"&gt;Washington&lt;/option&gt;
         &lt;/optgroup&gt;
        &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>application.js</strong></p>
  
  <pre><code>$("#e9").select2();
  </code></pre>