JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<input type="number" id="quantidade"/>
<button id="adicionarBichinho">
AdicionarBichinho
</button>
<div id="area"> 
</div>

CSS

input{
  width: 100%;
  margin: 10px 0;
}

input[type=number]{
  width: 100px;
  margin: 10px 0;
}

JavaScript

document.querySelector("#adicionarBichinho").addEventListener("click", function(){
	var quantidade = parseInt(document.querySelector("#quantidade").value);
	for(var i=0; i < quantidade; i++){
	document.querySelector("#area").innerHTML = document.querySelector("#area").innerHTML + "<input type=\"text\" name=\"campo[]\">";
  }
});