Duplicate Form Elements With Add/Remove Capabilities - isiaFormRepeater

Yet another jQuery plugin for repeatable form elements that allow the end user to duplicate groups of form controls with add/remove capabilities.

How to use it:

1. Insert the core stylesheet isia-form-repeater.min.css into the header of the html page.

<link rel="stylesheet" href="css/isia-form-repeater.min.css">

2. Wrap a group of form elements you want to duplicate in a DIV container with the CSS class repeat-items. Note that each form field must have an unique ID as follows.

• data-field-id: field ID
• data-items-index-array: index array

<div class="isiaFormRepeater repeat-section" 
     id="example" 
     data-field-id="example_field_id"
     data-items-index-array="[1]">
  <div class="repeat-items">
    <div class="repeat-item" data-field-index="1">
        <label>Name</label>
        <input type="text" class="repeat-el" id="example_field_id[test_sub1][1]" name="example_field_id[test_sub1][1]">
        <label>Email</label>
        <input type="email" class="repeat-el" id="example_field_id[test_sub2][1]" name="example_field_id[test_sub2][1]">
    </div>
    ...More Repeatable Elements Here...
  </div>
</div>

3. Put jQuery library and the isiaFormRepeater plugin's script isia-form-repeater.min.js at the bottom of the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/isia-form-repeater.min.js"></script>

4. Initialize the plugin and done.

$('#example').isiaFormRepeater();

5. Customize the add/remove buttons.

$('#example').isiaFormRepeater({
  addButton: 'Add Button Here',
  removeButton: 'Remove Button Here'
});

---

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