JSFiddle - React, Tailwind, and code Playground

by lgedeon

HTML

<form name="post" action="" method="post" target="_blank" id="theform" class="form-container">
    <section>
        <div class='repeater-container'>
            <div class="confuser">
                <input type="text" name="horse[1][name][]" value="1" />
                <div>
                    <span>
                        <a class="repeater-delete" href="#">Delete</a> |
                        <a class="repeater-add" href="#">Add</a>
                    </span>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class='repeater-container'>
            <div class='repeater-container'>
                <div>
                    <input type="text" name="monkey[1][color][1]" value="1" />
                    <div>
                    <span>
                        <a class="repeater-delete" href="#">Delete</a> |
                        <a class="repeater-add" href="#">Add</a>
                    </span>
                    </div>
                </div>
            </div>
            <span>
                <a class="repeater-delete" href="#">Delete</a> |
                <a class="repeater-add" href="#">Add</a>
            </span>
        </div>
        <section class='repeater-container'>
            <div class='repeater-container'>
                <div class='repeater-container'>
                    <div>
                        <input type="text" name="car[1][wheel][1][color][1]" value="1" />
                        <div>
                        <span>
                            <a class="repeater-delete" href="#">Delete</a> |
                            <a class="repeater-add" href="#">Add</a>
                        </span>
                        </div>
                    </div>
                </div>
                <span>
                    <a class="repeater-delete" href="#">Delete</a> |
                    <a class="repeater-add" href="#">Add</a>
                </span>
            </div>
           ...

JavaScript

function _duckPunchFormClickEvent( e ) {
    e = e || window.event;
    var target = e.srcElement || e.target;
    
    // check to see if the element is an <a> tag
    if( target.nodeName === 'A' && target.className === 'repeater-delete' ) {
        _deleteContainer( _findRepeatingParent(target) );
    }
    else if( target.nodeName === 'A' && target.className === 'repeater-add' ) {
        console.log(_findRepeatingParent(target));
        _duplicateContainer( _findRepeatingParent(target) );
    }
}
function _findRepeatingParent(innerNode) {
    if (innerNode.className === 'repeater-container') {
        return innerNode;
    } else if (innerNode.parentNode) {
        return _findRepeatingParent(innerNode.parentNode);
    } else {
        return false;
    }
}
function _duplicateContainer( parent ) {
    var div = document.createElement( 'div' );
    div.innerHTML = parent.innerHTML;

    var repeaterArray = parent.getAttribute("data-repeaterarray");
    var repeaterId = parent.getAttribute("data-repeaterid");
    var nextChild = parseInt(parent.getAttribute("data-lastchild" ),10) + 1;
    var prefix = Array(nextChild.toString().length).join("0");

    parent.setAttribute("data-lastChild", nextChild);
    div.setAttribute("data-repeaterarray", repeaterArray);
    div.setAttribute("data-repeaterid", repeaterId + prefix + nextChild);
    div.setAttribute("data-lastchild", 0);
    div.className = 'repeater-container';

    regex = new RegExp(repeaterArray+"\\["+repeaterId+"\\]");
    
    div.innerHTML = div.innerHTML.replace( regex, repeaterArray+"["+repeaterId+prefix+nextChild+"]" );
    parent.parentNode.insertBefore(div, parent.nextSibling);
}
function _deleteContainer( parent ) {
    parent.parentNode.removeChild( parent );
}
function _addEvent( event, element, callback ) {
    if( window.addEventListener ) {
        element.addEventListener( event, callback, false );
    }
    else {
        element.attachEvent( 'on' + event, callback );
    }
}

var form =...