JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button green" id="add"><p>Add</p></div>
<!--div class="button red" id="removeall"><p>Remove All</p></div>
<div class="button red" id="remove"><p>Remove index</p><input type='text' value='1' id="rVal" /></div-->

<div id="out" style="clear: both;">  
</div>

CSS

.textbox {
    width: 150px;
    height: 15px;
}
.button{
    float: left;
    cursor: pointer;
    width: 150px;
    height: 25px;
    margin: 3px;
    border: 1px solid black;
}
.button p {
    padding-top: 5px;
    font: bold 12px arial;
    text-align: center;
    width: 100%;
    margin-right:-25px;
    float: left;
}
.button input {
    border: 1px dotted black;
    width: 15px;
    height: 15px;
    float: right;
    margin-left: -15px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.green{
    background-color: green;
}

.red{
    background-color: red;
}

JavaScript

function addTextboxClick() {
    var len = document["textboxes"].length;
    document["textboxes"][len] =
        $("<div><input type='text' value='" + len + "'/></div>")
        .appendTo($("#out"));        

}

function removeAllClick() {
    var end = document["textboxes"].length;
    for (var i = end - 1 ; i >= 0; i--) {
        var txB = document["textboxes"][i];
        $(txB).remove();
        document["textboxes"].length -= 1;
    }
}

function removeIndex(index) {
     $(document["textboxes"][index]).remove();
     document["textboxes"].splice(index,1);
}

function removeClick() {
    removeIndex(parseInt($("#rVal").val()));
}

document["textboxes"] = [];
$('#add').click(addTextboxClick);
$('#removeall').click(removeAllClick);
$('#remove').click(removeClick);