jQuery Clone to Copy a Table Row and Increment ID

cloneData.js is a simple, mostly jQuery-based plugin for cloning and deleting type making it possible to duplicate a number of fields in HTML type and additional discipline ID for clients who want to enter additional information.

How to make use of it:

1. Load the primary script cloneData.js after loading the newest jQuery library.

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

2. Wrap the shape fields you wish to duplicate right into a container with a distinctive ID.

<div id="main-container">
  <div class="container-item">
    <label class="control-label" for="address_line_one_0">Address</label>
    <input type="text" id="address_line_one_0" name="Address[0][address_line]">
    <textarea name="Address[0][desc]" id="desc_0"></textarea>
    ... More Form Fields Here ...
  </div>
</div>

3. Create Add & Remove buttons on the web page.

<a href="javascript:void(0)" class="remove-item">Remove</a>
<a id="add-more" href="javascript:;">Add More Fields</a>

4. Initialize the plugin with a number of choices.

$('#add-more').cloneData(
  // container to hold the dulicated form fields
  mainContainerId: 'main-container',
  // Which you wish to clone
  cloneContainer: 'container-item',
  // CSS lcass of take away button
  removeButtonClass: 'remove-item'
);

5. Determine the EXCLUDE class which can be utilized to exclude a component and its kids.

$('#add-more').cloneData({
  excludeHTML: ".exclude"
});

6. Determine the min and max numbers of copies.

$('#add-more').cloneData(
  // 0 = unlimited
  maxLimit: 0, 
  // 0 = unlimited
  minLimit: 1
);

7. Determine whether or not to indicate an alert when the consumer tries to take away kind fields.

$('#add-more').cloneData(
  removeConfirm: true, 
  removeConfirmMessage: 'Are you sure wish to delete?'
);

8. Determine whether or not to clear the enter values after duplicating.

$('#add-more').cloneData({
  clearInputs: true
});

9. Config how one can increment discipline ID & title.

$('#add-more').cloneData({
  counterIndex: 0,
  regexID: /^(.+?)([-d-]{1,})(.+)$/i,
  regexName: /(^.+?)([[d{1,}]]{1,})([.+]$)/i,
});

10. More configuration choices with default values.

$('#add-more').cloneData();

11. Callback features.

$('#add-more').cloneData({
  init: function() {},
  complete: function() {},
  beforeRender: function() {},
  afterRender: function() {},
  beforeRemove: function() {},
  afterRemove: function() {}
});

Javascript Clone Row Increment ID, Duplicate Form Fields jQuery, jQuery Clone Form Validation, Dynamic Form jQuery Plugin/Github