JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div id="inputs-wrapper"></div>
                    <hr>
                    <div id="add-more-exchange-addresses">
                        <a href="#" id="add-more-field-box" class="btn text-muted">Add Field</a><br><br>
                    </div>
                    <small class="text-muted">Max 10 fields in edit popup modal. For more inputs click "Add New" button use same name of exchange and put unlimited number of addresses.</small>

JavaScript

let BackOffice = {

    init: function ()
    {
        this.exchanges();
    },


    exchanges: function ()
    {
        utils.manageFields(6);
    },
};

let utils = {

    manageFields: function (cntAddresses, callback = false)
    {
        let maxInputs           = 10,                                   // maximum extra input boxes allowed
            form                = $('#edit-exchange-form'),
            wrapperInputs       = $('#inputs-wrapper'),                 // input boxes wrapper element
            addBtnWrap          = $('#add-more-exchange-addresses'),    // add button element wrapper
            addBtn              = $('#add-more-field-box'),             // add button element
            currentAddresses    = cntAddresses,                         // to keep track of text box added
            html;                                                       // html elements as need previous predefined

        // on add input button click
        $(addBtn).click(function() {
            // max input box allowed
            if(currentAddresses <= maxInputs) {
                currentAddresses++; // text box increment
                // create elements
                let inputGroups = callback ? callback(html) : html.nesting();
                wrapperInputs.append(inputGroups);
                addBtnWrap.show();
                // delete the "add"-link if there is "maxInputs" fields.
                if(currentAddresses === maxInputs)
                    addBtnWrap.hide();
            }
            return false;
        });

        // user click on remove btn
        $('body').on('click', '.remove-exchange-address-field', function() {
            let me = $(this);
            if(currentAddresses > 0) {
                me.parent('div').parent('div').remove();  // remove group box
                currentAddresses--; // text box decrement
                addBtnWrap.show();
            }
            return false;
        });

        html = {
          ...