如何重复点击部分？

Question

I have this fiddle https://jsfiddle.net/74mh06v9/ where I am stuck on how to repeat the form group?

This code I am using is as below;

$(function () {
        $(".repeat").on('click', function (e) {
        e.preventDefault();
        var $self = $(this);
        $self.before($self.prev('table').clone());
        });
    });

My HTML is

     <div class="col-md-12" class="repeatable">          
        <h4>Invoice Details </h4>
<table>
    //various form groups here to repeat
</table>
    <button class="repeat">Add Another</button>

Answer 1

Firslty, there is no need of table(no rows and columns), and replace table to div and add a class frm to it, then make a clone and append it.

 $(function() { $(".repeat").on('click', function(e) { var frm =$('.frm:first').clone(); frm.find('input').val(''); $('.frm:last').after(frm); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 repeatable"> <div class="frm"> <h4>Invoice Details </h4> <div class="col-sm-3"> <div class="form-group"> <label>Service User</label> <div class="input-group"> <input name="service_user" id="service_user" class="form-control" type="text"></div> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label>Hours</label> <div class="input-group"> <input name="total_hours" id="total_hours" class="form-control" type="text"> </div> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label>Rate</label> <div class="input-group"> <input name="rate" id="rate" class="form-control" type="text"> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label>Sub Total</label> <div class="input-group"> <input name="invoice_amount" id="invoice_amount" class="form-control" type="text"> </div> </div> </div> </div> </div> <button class="repeat">Add Another</button> 

Answer 2

Slight changes to the answer above:

<script>
    $(function () {
            $(".repeat").on('click', function (e) {
            e.preventDefault();
            var clonedForm = $(".frm").clone();
            clonedForm.appendTo("#table");
            frm.find('input').val('');
            });
        });
    </script>

     <div class="col-md-12" class="repeatable">        
    <table id  ="table">
     <div class="frm">
      <h4>Invoice Details </h4>
          <div class="col-sm-3">
          <div class="form-group">
            <label>Service User</label>

            <div class="input-group">
            <input name="service_user" id="service_user" class="form-control" type="text"></div>
            </div>
          </div>

          <div class="col-sm-3">
            <div class="form-group">
              <label>Hours</label>
              <div class="input-group">
                <input name="total_hours" id="total_hours" class="form-control" type="text">
              </div>
            </div>
          </div>

          <div class="col-sm-3">
            <div class="form-group">
              <label>Rate</label>
              <div class="input-group">
                <input name="rate" id="rate" class="form-control" type="text">
              </div>
            </div>


          <div class="col-sm-3">
            <div class="form-group">
              <label>Sub Total</label>
              <div class="input-group">
                <input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
              </div>
            </div>
          </div>
        </div>
        </div>
    </table>
    <button class="repeat">Add Another</button>

Answer 3

First of all your html ws wrong inside table there should be td,tr etc but u placed div's i dont kno why. i hv corrected it its working now. HTML:

<div class="col-md-12" class="repeatable">
  <div class="base-group" style="display:none;">
    <h4>Invoice Details </h4>
    <div class="col-sm-3">
      <div class="form-group">
        <label>Service User</label>

        <div class="input-group">
        <input name="service_user" id="service_user" class="form-control" type="text"></div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Hours</label>
          <div class="input-group">
            <input name="total_hours" id="total_hours" class="form-control" type="text">
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Rate</label>
          <div class="input-group">
            <input name="rate" id="rate" class="form-control" type="text">
          </div>
        </div>


      <div class="col-sm-3">
        <div class="form-group">
          <label>Sub Total</label>
          <div class="input-group">
            <input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
          </div>
        </div>
      </div>
    </div>



</div>

   <div id="main-form">

   <div class="child-group">
    <h4>Invoice Details </h4>
    <div class="col-sm-3">
      <div class="form-group">
        <label>Service User</label>

        <div class="input-group">
        <input name="service_user" id="service_user" class="form-control" type="text"></div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Hours</label>
          <div class="input-group">
            <input name="total_hours" id="total_hours" class="form-control" type="text">
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Rate</label>
          <div class="input-group">
            <input name="rate" id="rate" class="form-control" type="text">
          </div>
        </div>


      <div class="col-sm-3">
        <div class="form-group">
          <label>Sub Total</label>
          <div class="input-group">
            <input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
          </div>
        </div>
      </div>
    </div>
</div>

   </div>
<button type="button" class="repeat">Add Another</button>

JS:

$(function() {
  $(".repeat").on('click', function(e) {
        var c = $('.base-group').clone();
    c.removeClass('base-group').css('display','block').addClass("child-group");
    $("#main-form").append(c);
  });
});

fiddle https://jsfiddle.net/riazxrazor/74mh06v9/9/ if you want to try