JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

input{
	margin: 0px;
}

div {
	margin: 3px;
}

JavaScript

window.add =  function() {
	var inpt = document.getElementById('textbox');
	var clone = inpt.cloneNode(false);
	inpt.parentNode.appendChild(clone);

	var button1 = document.getElementById('addition');
	button1.parentNode.appendChild(button1.cloneNode(true));

	var button2 = document.getElementById('subtraction');
	button2.parentNode.appendChild(button2.cloneNode(true)); 

	var div1 = document.getElementById('replace');
	div1.parentNode.appendChild(div1.cloneNode(false));
}

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

	clonedTextbox[clonedTextbox.length-1].parentNode.removeChild(clonedTextbox[clonedTextbox.length-1]);
	clonedButton1[clonedButton1.length-1].parentNode.removeChild(clonedButton1[clonedButton1.length-1]);
	clonedButton2[clonedButton2.length-1].parentNode.removeChild(clonedButton2[clonedButton2.length-1]);
}