JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div class="container">
<div class="boxcontainer" id="box_1">
<textarea class="inputbox" name="input_1" id="input_1" rows="5" cols="60"></textarea>
<button id="btnMinus_1" onclick="areaMinus('box_1')">-</button>
</div>
</div>
<button id="btnPlus" onclick="areaPlus()">+</button>

CSS

.container .boxcontainer:first-child button {
  display: none; /* hide first minus button */
}

JavaScript

function areaPlus() {
	var container = document.getElementsByClassName('container')[0];
  var cc = container.children;
  if (cc.length == 5) {
  	alert('Maximum number of input boxes reached');
    return;
  }
  var n;
  for (n = 2; n <= cc.length; n++) {
  	if (document.getElementById('box_' + n) == null)
    	break;
  }
  var boxhtml = cc[0].outerHTML.replace(/_1/g, '_' + n);
  container.insertAdjacentHTML('beforeend', boxhtml);
  document.getElementById('input_' + n).value = '';
}

function areaMinus(boxid) {
	var container = document.getElementsByClassName('container')[0];
  container.removeChild(document.getElementById(boxid));
}