Duplicate Input Fields With Add/Remove Buttons - jQuery repeatable.js

The repeatable.js jQuery plugin allows you to create groups of form input fields which can be dynamically added and removed as needed.

How to use it:

1. Insert the 'repeatable' container and 'Add New' button into your html form as these:

<form>

  <fieldset class="todos_labels">

    <div class="repeatable"></div>

    <input type="button" value="Add" class="add">

  </fieldset>

</form>

2. Create the field group template.

<script type="text/template" id="todos_labels">
  <div class="field-group">

    <label for="task_{?}">Task to do</label>
    <input type="text" name="todos_labels[{?}][task]" value="{task}" id="task_{?}">

    <label for="duedate_{?}">Due date</label>
    <input type="text" name="todos_labels[{?}][duedate]" value="{duedate}" id="duedate_{?}">

    <input type="button" class="delete" value="Remove">

  </div>
</script>

3. Insert jQuery JavaScript library and the JavaScript file jquery.repeatable.js into the page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.repeatable.js"></script>

4. Initialize the plugin and done.

$(".todos_labels .repeatable").repeatable({
  addTrigger: ".todos_labels .add",
  deleteTrigger: ".todos_labels .delete",
  template: "#todos_labels"
});

5. Possible configuration options with default values.

$(".todos_labels .repeatable").repeatable({
  addTrigger: ".add",
  deleteTrigger: ".delete",
  max: null,
  min: 0,
  template: null,
  itemContainer: ".field-group"
});

6. Callback functions available.

$(".todos_labels .repeatable").repeatable({
  beforeAdd: function () {},
  afterAdd: function () {},
  beforeDelete: function () {},
  afterDelete: function () {}
});

Change log:

2017-12-15

• Passed soon-to-be removed element to beforeDelete callback

---

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