Clone Form Sections Or Subcomponents With jQuery - clone-form-td.js

clone-form-td.js is a form creation and manipulation plugin which dynamically clones a section or multiple subcomponents of an HTML form.

The clone sections or subcomponents can be dynamically removed from a form as needed.

Compatible with both Bootstrap 4 and Bootstrap frameworks.

How to use it:

1. Load jQuery library and the clone-form-td.js script in the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="clone-form-td.js"></script>

2. If you want to clone multiple subcomponents of a form instead of a section:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="clone-form-td-multiple.js"></script>

3. Create buttons to add or remove a section from an HTML form.

<button type="button" id="btnAdd" name="btnAdd">Add section</button>
<button type="button" id="btnDel" name="btnDel">Remove section above</button>

4. Clone multiple subcomponents of a form instead of a section.

<!-- field to clone -->
<div id="entry1" class="clonedInput_1">
  <!-- Text input-->
  <div class="form-group">
    <label class="label_email" for="email_address">Email:</label>
    <input id="email_address" name="email_address" type="text" class="input_email">
  </div>
</div>

<!-- add/remove buttons -->
<button type="button" id="btnAdd_1" name="btnAdd">Add email</button>
<button type="button" id="btnDel_1" name="btnDel">Remove email</span></button>

<!-- field to clone -->
<div id="phone1" class="clonedInput_2">
  <!-- Text input-->
  <div class="form-group">
    <label class="label_phone" for="phone_number">Phone:</label>
    <input id="phone_number" name="phone_number" type="tel" class="input_phone">
  </div>
</div>

<!-- add/remove buttons -->
<button type="button" id="btnAdd_2" name="btnAdd_2">Add phone</button>
<button type="button" id="btnDel_2" name="btnDel_2">Remove phone</button>

...

---

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