JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm" data-linhas="0">

</div>
<template id="tmplLinha">
  <div>
    <input type="date" id="txtData_" name="data[]">
    <input type="time" id="txtHoraIni_"   name="hinicio[]">
    <input type="time" id="txtHoraFim_" name="hfim[]">
  </div>
</template>

JavaScript

var txtQuantidade = document.getElementById("txtQuantidade");
var btnAdicionar = document.getElementById("btnAdicionar");
var divForm = document.getElementById("divForm");
var tmplLinha = document.getElementById("tmplLinha").content;

btnAdicionar.addEventListener("click", function () {
	var linhas = parseInt(divForm.dataset.linhas) || 0;
  var quantidade = parseInt(txtQuantidade.value) || 0;
  
  for (var indice = linhas; indice < linhas + quantidade; indice++) {
  	var linha = document.importNode(tmplLinha, true);
  	[].forEach.call(linha.querySelectorAll("input[id]"), function (input){    
    	input.id = input.id + indice;
    });
    divForm.appendChild(linha);
  }
  divForm.dataset.linhas = indice;
});