title: Adding Dynamic Multiple Bootstrap Select Fields
body: <p>I have two input type text fields on a form that has an 'add more' button which dynamically adds fields (array) with the same name:</p>
  
  <pre><code>&lt;div name="teacheraddpanel" id="teacheraddpanel" style="display:none";&gt;
  &lt;h4&gt;Add Teachers&lt;/h4&gt;
  &lt;div class="container"&gt;
   &lt;div class="input-group control-group after-add-more"&gt;
    &lt;div class="col-md-9"&gt;
     &lt;input type="text" id="names[]" name="names[]" placeholder="Name" required&gt;
     &lt;input type="text" id="emails[]" name="emails[]" size="25" placeholder="Enter Email"&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-success add-more" type="button"&gt;Create Another&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/button&gt; 
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been struggling to try to include a select field within this group on the same line which could also be added(array) multiple times.  I've trying something like:</p>
  
  <pre><code>&lt;div style="display:inline-block;"&gt;
   &lt;button class="btn btn-default dropdown-toggle" type="button"  id="grade[]" name="grade[]" data-toggle="dropdown" aria-haspopup="true" aria  expanded="true"&gt;Grade
   &lt;span class="caret"&gt;&lt;/span&gt;
   &lt;/button&gt;
   &lt;ul class="dropdown-menu" aria-labelledby="grademenu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm struggling with this type of select box actually displaying what is selected and then trying to figure out how to dynamically create additional fields with the same name if the user selects to 'add more'.  Here is the script for adding addtional TEXT fields when the 'add more' is clicked.</p>
  
  <pre><code>//first get the contents of the div with name class copy-fields and add  it to after "after-add-more" div class.
            $(".add-more").click(function(){ 
                var html = $(".copy-fields").html();
                $(".after-add-more").after(html);
            });
  ...
  &lt;!-- Copy Fields-These are the fields which we get through jquery and  then add after the above input,--&gt;
                          &lt;div class="copy-fields hide"&gt;
                              &lt;div class=" input-group control-group" style="margin-top:8px"&gt;     
                                  &lt;div class="col-md-10"&gt;
                                      &lt;input type="text" name="names[]" placeholder="Enter Name"&gt;
                                      &lt;input type="text" name="emails[]" size="25" placeholder="Enter Email"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="input-group-btn" style="float: left; align: middle;"&gt;
                                  &lt;button class="btn btn-danger remove" type="button"&gt;&lt;/i&gt;Remove&lt;/button&gt;&lt;/div&gt;
                              &lt;/div&gt; 
                          &lt;/div&gt;
  </code></pre>