JSFiddle - React, Tailwind, and code Playground

by Rational Rabbit

HTML

<fieldset>
        <div class="parent-group">
            <div class="form-group">
                <input id="Name(0)" name="Name[0]" size="20" value="" />
                <input type="checkbox" id="HM(0)" name="HM[0]" value="X" />
                <textarea class="txt" id="TA(0)" rows="1" cols="30" name="TA[0]" maxlength="100"></textarea>
                <input class='msg' name="Output" id="Output" size="3" readonly disabled value="100" />
                <input type="text" name="Location[0]" id="Location(0)" size="30" value="" />
                <div class="form-group" style="display:inline-block;">
                    <a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
                </div>
                <div class="Clear"></div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="container"></div>
        <div class="form-group">
            <a id="AddRow" href="javascript:void(0)"><span style="color:#0F61AC;">Add Row</span></a>
        </div>
    </fieldset>

CSS

textarea,
output,
button {font-size:inherit;}
output:nth-of-type(n+2) {margin-left:3px;}
.msg {border:none;}
.clearfix:before,
.clearfix:after {display:table; content: "";}
.clearfix:after {clear:both;}
.RowDeleteButton {float:right; font-family:arial, sansserif; font-size:14px; display:inline-block; text-decoration:none; color:#AC0F0F; font-weight:900; cursor:pointer;}
.RowDeleteButton:hover, .RowDeleteButton:focus {color:#FF0000;}

JavaScript

window.LastArrayValue = 0;
    $('#DeleteRow').closest('.form-group').hide();
    $('#AddRow').on('click', function(e)
    {
        var ChildCount = $('.child-group').length;
        if(ChildCount == 7)
        {
            alert("Sorry, 8 is the maximum number of rows");
        }
        else
        {
            var len = window.LastArrayValue;
            window.LastArrayValue = len + 1;
            $('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
            {
                var ename = ele.name;
                var eid    = ele.id
                var ArrayValue = len+1;
                ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
                ele.id    = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
                if(ele.type == "checkbox"){ele.checked = false;}
                else{ele.value = '';}
            }).end().find('.form-group').toggle(true).end()
              .toggleClass('parent-group child-group').hide()
              .appendTo('#container').slideDown('slow');
        }
    });
    $('.del').on('click', function(e)
    {
        var jsonData = $(this).closest('.child-group, .parent-group')
        .find(':input:not(button)').get()
        .reduce(function(acc, ele)
        {
            acc[ele.name || ele.id] = ele.value;
            return acc;
        }, {});
        $(this).closest('.child-group, .parent-group').remove();
        console.log(jsonData);
    });

    function charCount(e)
    {
        // Get the text
        var chars = this.value;
        // Get maxlength as a number
        var charMax = Number(this.getAttribute('maxlength'));
        // Number of chars typed
        var charDone = chars.length;
        // Chars remaining is 100 - chars typed
        var charToGo = charMax - charDone;
        // Display chars remaining
        $(this).next('.msg').val(charToGo);
    }

    // onkeyup invoke charCount
    $('.txt').on('keyup', charCount);