Clone Web Elements In A Snap With The pcsCpElement jQuery Plugin

pcsCpElement is a minimalist (less than 1kb) jQuery plugin that enables you to quickly duplicate page elements with just a few lines of code.

It can clone any element within a container, perfect for repeating elements like contact fields, table rows, shopping cart items, etc.

How to use it:

1. Make sure you have jQuery in your project and then import the pcsCpElements.jquery.js script into your document.

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

2. Create a button that will serve as the trigger to clone your desired element.

<table id="pcs-cp-container">
  <tr>
    <th>FIELD 1</th>
    <th>FIELD 2</th>
    <th>FIELD 3</th>
  </tr>
  <!-- Element To Clone -->
  <tr id="pcs-cp-element">
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
  </tr>
</table>

<!-- Clone Button -->
<button id="pcs-cp-button">
  Copy Element
</button>

3. Initialize the pcsCpElement plugin. Define the container where you want to copy your element, specify the element to be cloned, and designate the button you just created to handle the cloning.

$(document).ready(function() {
  $.pcsCpElement({
    container: "#pcs-cp-container",
    element: "#pcs-cp-element", 
    button: "#pcs-cp-button" 
  });
});

4. That's it! Every time you click the button, the specified element (pcs-cp-element) will be cloned and automatically appended to the container (pcs-cp-container).

---

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