JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<button onclick="inputar(event)">
Inputeie
</button>
<div id="meusInputoes">
    
</div>

CSS

div{
  padding: 10px 0;
}

label{
  display:block;
}

JavaScript

function inputar(event){
	var n = 0;
  if(document.querySelectorAll('#meusInputoes input').length > 0){
    n = (document.querySelectorAll('#meusInputoes input')[document.querySelectorAll('#meusInputoes input').length -1]).getAttribute("data-ref"); 
  }
  n++;
	var novoInputao = "<label>Inputinho " + n + " </label><input type='text' data-ref="+n+" class='meuinputinho-" + n + "'/><br/><button onclick='desemputiar(event)'>Desemputiar</button>";
  var temp = document.createElement('div');
  temp.id = "inputo" + n;
	temp.innerHTML = novoInputao;
  document.querySelector("#meusInputoes").appendChild(temp);
  event.target.innerHTML = "Inputeie mais um - Já foi" + n;
}

function desemputiar(event){
	event.target.parentElement.remove();
}