Clone Elements And Assign Unique ID & For Values - jQuery Unique Clone

File Size: 44.8 KB
Views Total: 1546
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Clone Elements And Assign Unique ID & For Values - jQuery Unique Clone

Unique Clone is a jQuery plugin to extend the core clone() method that clones an element while modifying any id and/or for attributes found within the element's scope to append a given suffix.

How to use it:

1. To use the plugin, include the jquery-unique-clone.min.js script after the latest jQuery library.

<script src="" 
<script src="jquery-unique-clone.js"></script>

2. Create a set of elements you want to clone.

<div class="example">
  <label for="username">User Name</label>
  <input type="text" id="username">

3. The JavaScript to clone the element set.


4. Append the cloned elements to a specific container.

const cloned = $('.example').uniqueClone();

5. The cloned elements:

<div class="example">
  <label for="username-clone">User Name</label>
  <input type="text" id="username-clone">

6. Determine whether to clone the element with data and events.


7. Determine whether to clone with data and events of the element and it's children.

$('.example').uniqueClone(true, true);

8. Specify the string to append to the attribute value.

$('.example').uniqueClone(true, false, 'your-suffix');

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