Form Repeater

It creates an interface to add and remove a repeatable group of input elements.
Read the official jQuery Repeater Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<script src="jquery.repeater.min.js"></script>

    
2. Binding to existing DOM element.

<form action="#" class="invoice-repeater">
  <div data-repeater-list="invoice">
    <div data-repeater-item>
      <div class="mb-1">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          aria-describedby="name"
          placeholder="Luke Baker"
        />
      </div>
      <button type="button" class="btn btn-outline-danger" data-repeater-delete>
        <i data-feather="x" class="me-25"></i>
        <span>Delete</span>
      </button>
    </div>
  </div>
  <button type="button" class="btn btn-icon btn-primary" data-repeater-create>
    <i data-feather="plus" class="me-25"></i>
    <span>Add New</span>
  </button>
</form>

    
3. Basic usage looks something like this:

$('.invoice-repeater, .repeater-default').repeater({
  show: function () {
    $(this).slideDown();
    // Feather Icons
    if (feather) {
      feather.replace({ width: 14, height: 14 });
    }
  },
  hide: function (deleteElement) {
    if (confirm('Are you sure you want to delete this element?')) {
      $(this).slideUp(deleteElement);
    }
  }
});

    

Refer following links for detailed documentation, configuration options, methods and examples: