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="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<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">
</div>

3. The JavaScript to clone the element set.

$(function(){
  $('.example').uniqueClone();
});

4. Append the cloned elements to a specific container.

const cloned = $('.example').uniqueClone();
cloned.appendTo('#output');

5. The cloned elements:

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

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

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

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.