Basic Form Fields Repeater For jQuery - Repeater.js

This is a dead simple jQuery based form repeater plugin which enables the user to add and remove any number of groups of form controls in an HTML form.

Works with any 3rd front-end frameworks such as Bootstrap 3, Bootstrap 4, Material Design Lite, Foundation, etc.

How to use it:

1. Create a group of repeatable form fields with a 'Remove' button in your HTML form.

<div class="items" data-group="test">
  <!-- Repeater Content -->
  <div class="item-content">
    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputName" placeholder="Name" data-name="name">
      </div>
    </div>
    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
      <input type="text" class="form-control" id="inputEmail" placeholder="Email" data-skip-name="true" data-name="email">
      </div>
    </div>
  </div>
  <!-- Repeater Remove Btn -->
  <div class="pull-right repeater-remove-btn">
      <button id="remove-btn" class="btn btn-danger" onclick="$(this).parents('.items').remove()">
          Remove
      </button>
  </div>
</div>

2. Wrap the repeatable form group together with an 'Add' button into a container element.

<div id="repeater">
  <!-- Repeater Heading -->
  <div class="repeater-heading">
      <button class="btn btn-primary repeater-add-btn">
          Add
      </button>
  </div>
  <!-- Repeater Items -->
  <div class="items" data-group="test">
    <!-- Repeater Items Here -->
  </div>
</div>

3. Insert jQuery JavaScript library and the jQuery Repeater.js script into the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="repeater.js"></script>

4. Call the function on the top container and the plugin will do the rest..

$(function(){

  $("#repeater").createRepeater();

});

Changelog:

2020-09-28

• add textarea to repeatable items

2019-08-24

• js update

2018-06-13

• remove button updates

2018-06-01

• Repeater default values improvements

2018-05-30

• Improvement

---

This awesome jQuery plugin is developed by vijaybajrot. For more Advanced Usages, please check the demo page or visit the official website.