jQuery Clone to Copy a Table Row and Increment ID | cloneData.js

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.

Must Read: Fully Responsive Angular UI Data Table Framework | ornamentum.app

How to make use of it:

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

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

2. Wrap the fields 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 ...

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 options.


  // 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.


  excludeHTML: ".exclude"


6. Determine the min and max numbers of copies.


  // 0 = unlimited
  maxLimit: 0, 

  // 0 = unlimited
  minLimit: 1


7. Determine to clear the entered values after duplicating.


  clearInputs: true


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


  counterIndex: 0,
  regexID: /^(.+?)([-d-]{1,})(.+)$/i,
  regexName: /(^.+?)([[d{1,}]]{1,})([.+]$)/i,


9. More configuration options with default values.


10. Callback features.


  init: function() {},
  complete: function() {},
  beforeRender: function() {},
  afterRender: function() {},
  beforeRemove: function() {},
  afterRemove: function() {}


See Demo And Download


Official Website(rajneeshgautam): Click Here

This superior jQuery/javascript plugin is developed by rajneeshgautam. For extra Advanced Usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

Leave a Reply

Your email address will not be published. Required fields are marked *