JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="Add()">Add TextBox</button>

<div id="Wrapper">
  <div id="div1">
    <p>This is Div one</p>
  </div>

  <div id="div2">
    <p>This is Div two</p>
  </div>

  <div id="div3">
    <p>This is Div threee</p>
  </div>

  <div id="div4">
    <p>This is Div Four</p>
  </div>

  <div id="ClearFix"></div>
</div>

CSS

#Wrapper {
  width: 90%;
  margin: 0 auto;
}

#div1 {
  float: left;
  width: 20%;
  background: lightblue;
}

#div2 {
  float: left;
  width: 20%;
  background: lightyellow;
}

#div3 {
  float: left;
  width: 20%;
  background: lightgray;
}

#div4 {
  float: left;
  width: 20%;
  background: lightblue;
}

#ClearFix {
  clear: both;
}

JavaScript

var divIds = ['div1','div2','div3','div4'];
function Add(){
divIds.forEach(function(item){
 document.getElementById(''+item+'').innerHTML ="<br><br><input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
})
}

//input.parentNode.childNodes will retun array of 4 elements, 2 br and 2 input
// need to remove first input
function removeRow(input) { 
   input.parentNode.childNodes[2].remove();
 }