How to repeat a section on click?

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>

Possible duplicate of https://stackoverflow.com/questions/7961900/jquery-clone-table-row — Sagar, Jun 16 '17 at 10:37

Rohan Kumar · Answer 1 · 2017-06-16T10:39:07.997

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>

this also copies the field values when cloned – KAD Jun 16 '17 at 10:35 — KAD, Jun 16 '17 at 10:35
Just check
that double class error.
– Roy Bogado Jun 16 '17 at 10:38 — Roy Bogado, Jun 16 '17 at 10:38

score 1 · Answer 2 · edited Jun 29 '17 at 02:11

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>

score 1 · Accepted Answer · answered Jun 16 '17 at 10:44

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

How to repeat a section on click?

3 Answers3