JSFiddle - React, Tailwind, and code Playground

by Sam G

HTML

<input type="text" class="textbox" /><button type="button" class="addition" onclick="add()">+</button><button type="button" class="subtraction" onclick="sub()">-</button>
<div class="replace"></div>

CSS

body {
    padding: 5px;
}
input, button {
    margin: 0px;
}
div {
    margin: 3px;
}
.addition {
    margin-left: 5px;
}
.subtraction {
    margin-left: 5px;
}

JavaScript

var numClones = 0;

window.add = function () {
    var inpt = document.querySelectorAll('.textbox')[numClones];
    var clone = inpt.cloneNode(false);
    clone.value = "";
    inpt.parentNode.appendChild(clone);

    var button1 = document.querySelectorAll('.addition')[numClones];
    button1.parentNode.appendChild(button1.cloneNode(true));

    var button2 = document.querySelectorAll('.subtraction')[numClones];
    button2.parentNode.appendChild(button2.cloneNode(true));

    button1.disabled = true;
    button2.disabled = true;

    var div1 = document.querySelectorAll('.replace')[numClones];
    div1.parentNode.appendChild(div1.cloneNode(false));
    numClones++;
}

window.sub = function () {
    var clonedTextbox = document.querySelectorAll('.textbox')[numClones];
    var clonedButton1 = document.querySelectorAll('.addition')[numClones];
    var clonedButton2 = document.querySelectorAll('.subtraction')[numClones];

    clonedTextbox.parentNode.removeChild(clonedTextbox);
    clonedButton1.parentNode.removeChild(clonedButton1);
    clonedButton2.parentNode.removeChild(clonedButton2);

    numClones--;

    if (numClones >= 0) {
        var lastAdd = document.querySelectorAll('.addition')[numClones];
        var lastSub = document.querySelectorAll('.subtraction')[numClones];
        lastAdd.disabled = false;
        lastSub.disabled = false;
    }
}