如何添加或追加更多然後一個下拉

Question

我的任務是添加以前的表單，當我點擊添加按鈕。

當我點擊添加按鈕，它會添加下面的每個下拉如圖所示。

並刪除一行（意味着所有5行的下拉列表）。我要做這個功能。

問題是：

我們如何可以附加或添加一行每點擊添加按鈕。

我coading是： jQuery的：

$(document).ready(function() { 
    $(".glyphicon").click(function() { 
     $(this).parents('.form-group').remove(); 
    }); 
    $(".add").click(function() { 
     $("form").parent(".form-group").add(); 
    }); 
}); 

$(document).ready(function() { 
    $(".glyphicon").click(function() { 
     $(this).parents('.form-group').remove(); 
    }); 
    $(".add").click(function() { 
     $("form").parent(".form-group").add(); 
    }); 
}); 

HTML：

<div class="form-group">   
      <div class="col-sm-12" > 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday</a></li><li class="week"><a href="#">Tuesday</a></li> 
        <li class="week"><a href="#">Wednesday</a></li><li class="week"><a href="#">Thusday</a></li> 
        <li class="week"><a href="#">Friday</a></li><li class="week"><a href="#">Saturdayy</a></li> 
        <li class="week"><a href="#">Sunday</a></li> 
       </ul> 
      </div> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <label for="exampleInputEmail1"> to </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <span class="glyphicon glyphicon-remove"></span> 
      </div> 
     </div> 

Answer 1

嘗試使用jQuery的從LIB .clone（），並簡單地克隆最後一個元素。

Clone manual here

編輯： 的答案，這個問題是在評論波紋管（jQuery的在（）函數）

Answer 2

謝謝你，我這樣做：

coading是：

$("#add").click(function(){ 
    $(".abcd:last").clone().appendTo(".wrapper"); 
}); 

提到的鏈接：

Cloning whole form elements after clicking button