用 JS 添加额外的行

Question

基本上我希望在单击添加按钮（最后一个 div）时复制它，但也要在名称上添加 _1

  <div class="form-group">
    <div class="col-sm-2">Size</div>
         <div class="col-lg-3">
             {{ Form::select('size', $sizes, null, ['class' => 'form-control'])}}
         </div>

        <div class="col-sm-1">Colour</div>
         <div class="col-lg-2">
             {{ Form::select('colour', $colours, null, ['class' => 'form-control'])}}
         </div>
         <div class="col-sm-1">Stock</div>
          <div class="col-lg-2">
              <input type="text" name="stock" class="form-control">
          </div>

          <div class="col-md-1">
          <!--- WHEN THIS IS CLICKED ----->
            <a class="btn btn-primary btn-sm" id="add"><i class="fa fa-plus"></i> Add</a>
          </div>
       </div>

当单击添加按钮时，我想再次显示整个表单组，在名称中添加下划线和数字也可以阻止重复条目。

所以我认为使用 jQuery 的东西应该这样做，但是作为一个 jQuery 新手我不知道该写什么。

所以在点击添加按钮时，它需要在已经存在的那个下面再次显示整个表单组 div，但还需要在名称属性中添加一个下划线和一个数字，以在我保存到数据库时停止重复条目.

Answer 1

下面的代码应该复制块并将新副本附加到主体，最外层 div 的名称设置为 ...a_x 如果我的问题是正确的，那就是你想要的

 var  x = 0;
    $("#add").click(function(){ 
      x++;
      $('.form-group:first').clone().attr("name", "a_"+x).appendTo($('body'));
      alert(x);
    });

还有来自 w3Schools 的链接http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_clone