JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<ul>
    <li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />

JavaScript

$(function(){
    $('#addTextbox').click(function(){
        var li = $('ul li:first').clone().appendTo($('ul'));
        
        // empty the value if something is already filled in the cloned copy
        li.children('input').val('');
        li.append($('<button />').click(function(){
            li.remove();
            // don't need to check how many there are, since it will be less than 5.
            $('#addTextbox').attr('disabled',false);
        }).text('Remove'));
        
        // disable button if its the 5th that was added
        if ($('ul').children().length==5){
            $(this).attr('disabled',true);
        }
    }); 
});