JSFiddle - React, Tailwind, and code Playground

by Luis Manuel

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="accession_boxes">
    <div class="form-group clonedBox" id="clonedBox0">
        <div class="col-lg-4 col-md-12 col-sm-12">
            <label><b>Box #:</b></label>
            <input id="boxNum0" type="number" value="1" min="1" max="10" style="max-width:40px;"/>
            <a id="btnAddBox" class="button">[+]</a>
            <a id="btnDelBox" class="button">[-]</a>
        </div><!--End of Add Box Div-->
        
        <div class="col-lg-6 col-md-12 col-sm-12">
            <a id="btnAddFolder0" class="btn btn-link" role="button" data-toggle="collapse" href="#collapseExample0" aria-expanded="false" aria-controls="collapseExample0">
                Add Folders <span class="badge" id="folderBadge0">0</span>
            </a>
            <div class="collapse" id="collapseExample0" style="max-width:500px;">
                <div class="well">
                    <button type="button" id="btnSearchFolders0" class="button" data-target=".bs-example-modal-lg" data-toggle="modal">
                        Search for Folders
                    </button>
                    <br />
                    <br />
                    
                    <table class="table" id="tableFolders0">
                        <tr>
                            <th>Site ID</th>
                            <th>Folder Number</th>
                            <th>Section</th>
                            <th>Subsection</th>
                            <th>Remove?</th>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
    ...

JavaScript

var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedBox").length;

    function clone() {
        $(this).parents(".clonedBox").clone()
            .appendTo("div#accession_boxes")
            .attr("id", "clonedBox" + cloneIndex)
            .find("*")
            .each(function () {
                var id = this.id || "";
                var match = id.match(regex) || [];
                
                if (match.length == 3) {
                    console.log(this)
                    this.id = match[1] + (cloneIndex);
                    this.href = match[1] + (cloneIndex);
                    $(this).attr("aria-controls", match[1] + cloneIndex);
                }
            })
            .on('click', '#btnAddBox', clone)
            .on('click', '#btnDelBox', remove);
        cloneIndex++;
    }
    function remove() {
        $(this).parents(".clonedBox").remove();
    }
    $("#btnAddBox").on("click", clone);

    $("#btnDelBox").on("click", remove);