JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<a class="btn btn-info" id="AddMoreFileBox" href="#">Add More Field</a>

<div id="InputsWrapper">
    <div>
        <input type="text" value="Text 1" id="field_1" name="mytext[]"><a class="removeclass" href="#">×</a>    
    </div>
</div>

JavaScript

var MaxInputs       = 8;
var InputsWrapper   = $("#InputsWrapper");
var AddButton       = $("#AddMoreFileBox");

var x = InputsWrapper.length;
var FieldCount=1;

$(AddButton).click(function (e)
{
        if(x <= MaxInputs)
        {
            FieldCount++;
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">&times;</a></div>');
            x++;
        }
    $('.removeclass').show();
return false;
});

$("body").on("click",".removeclass", function(e){
        if( x > 1 ) {
                $(this).parent('div').remove();
                x--;
        } else {
    $('.removeclass').hide();
        }
return false;
})