JSFiddle - React, Tailwind, and code Playground

HTML

Please enter a number :-
<div id="myList">
  
</div>
<input type="text" onkeyup="pushDiv(event)">

CSS

.red{
background-color: red;
width: 20px;
height: 20px;
margin: 10px;
display: inline-block;
}

#myList{
display: inline-block;
max-width: 200px;
height: auto;
background-color: #ccc;
}

JavaScript

function pushDiv(event){
console.log(event.target.value)
var node
  for(let i=0; i<event.target.value; i++){
			
			{
  			node = document.createElement("DIV");
        node.className = 'red'
				node.id = 'box'
        document.getElementById("myList").appendChild(node);
      }
  }
  if(event.target.value == 0){
	let checkChildNode = document.getElementById("myList").hasChildNodes()
							for(;checkChildNode;){
                  console.log('Working')
                  let item = document.getElementById("box")
									document.getElementById("myList").removeChild(item);
                }
      }
}