Dynamic Form Field Creation & Deletion Plugin - add-input-area

add-input-area is a simple-to-implement yet highly-customizable jQuery plugin used to duplicate/add/delete any number of form fields within the document.

Basic usage:

1. Download and place the minified version of the jQuery add-input-area plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="dist/jquery.add-input-area.min.js"></script>

2. Insert your form field into a list (or any other container element such as table) and create the Add/Delete buttons as follows:

<ol id="list">
  <li class="list_var">
    <input type="text" name="list_0" id="list_0">
    <button type="button" class="list_del">Delete Button</button>
  </li>
</ol>
<input type="button" value="Add Button" class="list_add">

3. Just call the function on the list and the plugin will take care of the rest.

$(function() {
  $('#list').addInputArea();
});

4. Customize the naming rules of the name & id attributes.

<textarea
  id="posts_0_mail"
  data-id-format="posts_%d_mail"
  name="data[posts][mail][0]"
  data-name-format="data[posts][mail][%d]"
></textarea>

5. You're also allowed to add/remove multiple form fields at a once.

<ol id="list">
  <li class="list_var">
    <input type="text" name="list-name_0">
    <input type="text" name="list-mail_0">
    <button type="button" class="list_del">Delete Button</button>
  </li>
</ol>
<input type="button" value="Add Button" class="list_add">

6. Possible customization options which can be passed to addInputArea() function on init.

$('#list').addInputArea({

  // CSS selector of add button
  btn_add: '.(id)_del',

  // CSS selector of delete button
  btn_del: '.(id)_del'

  // CSS selector of wrapper element
  area_var: '.(id)_var'

  // CSS selector of delete button's wrapper
  area_del: '.(id)_var'

  // a callback function which will be fired after adding
  after_add: null,

  // whether to clone events
  clone_event: true,

  // maximum number of form fields to duplicate
  maximum: 0,

  // css selector to avoid duplicating
  dont_clone:  null,

  // validat before adding
  validate: null
  
});

---

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