Добавление динамических полей выбора Bootstrap

Question

У меня есть два текстовых поля типа ввода в форме, в которой есть кнопка «Добавить еще», которая динамически добавляет поля (массив) с одинаковыми именами:

<div name="teacheraddpanel" id="teacheraddpanel" style="display:none";>
<h4>Add Teachers</h4>
<div class="container">
 <div class="input-group control-group after-add-more">
  <div class="col-md-9">
   <input type="text" id="names[]" name="names[]" placeholder="Name" required>
   <input type="text" id="emails[]" name="emails[]" size="25" placeholder="Enter Email">
  </div>
  <button class="btn btn-success add-more" type="button">Create Another&nbsp;&nbsp;&nbsp;&nbsp;</button> 
 </div>
</div>
</div>

Я изо всех сил пытался включить поле выбора в эту группу в одну и ту же строку, которая также может быть добавлена ​​(массив) несколько раз. Я пробовал что-то вроде:

<div style="display:inline-block;">
 <button class="btn btn-default dropdown-toggle" type="button"  id="grade[]" name="grade[]" data-toggle="dropdown" aria-haspopup="true" aria  expanded="true">Grade
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="grademenu">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
 </ul>
</div>

Я борюсь с этим типом поля выбора, фактически отображая то, что выбрано, и затем пытаюсь выяснить, как динамически создавать дополнительные поля с тем же именем, если пользователь выбирает «добавить больше». Вот скрипт для добавления дополнительных текстовых полей при нажатии кнопки «Добавить еще».

//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);
          });
...
<!-- Copy Fields-These are the fields which we get through jquery and  then add after the above input,-->
                        <div class="copy-fields hide">
                            <div class=" input-group control-group" style="margin-top:8px">     
                                <div class="col-md-10">
                                    <input type="text" name="names[]" placeholder="Enter Name">
                                    <input type="text" name="emails[]" size="25" placeholder="Enter Email">
                                </div>
                                <div class="input-group-btn" style="float: left; align: middle;">
                                <button class="btn btn-danger remove" type="button"></i>Remove</button></div>
                            </div> 
                        </div>