JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<table cellpadding="5" border="0">
    <tr>
        <td>
<div class="clonedInput">
        Link: <input type="text" name="link_1" class="input"/> </div>
        </td>
        <td valign="bottom">
<button id="Add"> + </button>
<button style="display:none;" id="Del"> - </button>
            </td>
    </tr>
    <tr>
        <td>
<div class="clonedInput">
        Name: <input type="text" name="name_1" class="input"/> </div>
        </td>
        <td valign="bottom">
            <button id="Add"> + </button>
            <button style="display:none;" id="Del"> - </button>
            </td>
    </tr>
</table>

JavaScript

var MAX_ELEMENTS = 5;
        $('.clonedInput').each(function (index, element) {
            console.log(this);
            var $this = $(this);
            var $thisParent = $this.parent();
            var $input = $this.find("input");
            var groupName = $input.attr('name').split('_')[0];
            
            var $addButton = $thisParent.parent().find("#Add");
            var $delButton = $thisParent.parent().find("#Del");
            
            $addButton.click(function (e) {
                var newElementIndex = $thisParent.find(".clonedInput").length;
                var $newElement = $thisParent.find(".clonedInput:last").clone();
                $newElement.find('input').attr( 'name', groupName + "_" + newElementIndex);
                $newElement.hide();
                $thisParent.find(".clonedInput:last").after($newElement);
                $newElement.animate({ height: 'toggle', opacity: 'toggle' }, "medium");
                $delButton.fadeIn();
                if ( newElementIndex >= (MAX_ELEMENTS - 1)  )
                    $addButton.fadeOut();
            });
            
            $delButton.click(function (e) {
                var newElementIndex = $thisParent.find(".clonedInput").length;
                $thisParent.find(".clonedInput:last").animate({
                    height: 'toggle',
                    opacity: 'toggle'
                }, {
                    duration : "medium",
                    complete : function() {
                        $(this).remove();
                    }
                });
                
                if (newElementIndex <= MAX_ELEMENTS )
                    $addButton.fadeIn();
        
                if ( newElementIndex  <= 2)
                    $delButton.fadeOut();
            });
        });