Duplicate And Manage Groups Of Input Elements - jQuery Replicate.js

Replicate.js is a jQuery plugin that allows you to create repeatable groups of input elements to collect multiple values from the user. It handles incrementing and decrementing the index in the input names automatically so the data is properly structured for processing on the server side.

The plugin works by listening for clicks on "Add" and "Remove" buttons you specify. When the user clicks "Add", it clones an existing input group, updates the input names using an array-like naming convention, and appends the cloned group. When "Remove" is clicked, it removes the corresponding group.

How to use it:

1. Get started by loading the jquery.replicate.js script after jQuery:

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.replicate.js"></script>

2. Add an initial group of input elements together with Add and Remove buttons to the wrapper element as follows:

<form action="" method="post" id="formID">
  <div data-x-wrapper="employees">
    <div data-x-group>
      <input type="text" name="emp_name" placeholder="Employee name">
      <input type="text" name="emp_code" placeholder="Employee code">
      <input type="text" name="emp_position" placeholder="Employee placeholder">
      <div class="add-remove">
        <button type="button" data-remove-btn>-</button>
        <button type="button" data-add-btn>+</button>
      </div>
    </div>
  </div>
  <div class="action-buttons">
    <button type="submit">Submit</button>
    <button type="button">Cancel</button>
  </div>
</form>

3. Call the replicate function on the wrapper element and pass the following options to the options:

const selector = '[data-x-wrapper]';
let options = {
    disableNaming: '[data-disable-naming]',
    wrapper: selector,
    group: '[data-x-group]',
    addBtn: '[data-add-btn]',
    removeBtn: '[data-remove-btn]'
};
$(selector).replicate(options);

---

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