Twitter bootstrap 添加动态多引导选择字段

我在一个表单上有两个输入型文本字段，该表单有一个“添加更多”按钮，可动态添加同名字段（数组）：

<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>

增加教师
创造另一个

我一直在努力尝试在同一行的这个组中包含一个select字段，它也可以被添加（数组）多次。我试过这样的方法：

<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>

//首先使用name class copy字段获取div的内容，并将其添加到“after add more”div类之后。
$（“.add more”）。单击（函数（）{
var html=$（“.copy fields”）.html（）；
$（“.after添加更多”）.after（html）；
});
...
去除

当您动态添加文本字段时，能否为按钮提供jquery脚本，我想您使用的是append方法，但在此之前，我需要确定您希望得到什么样的结果才能给出解决方案。谢谢Sigma。我已将脚本添加到原始帖子中。