JSFiddle - React, Tailwind, and code Playground

by David Buzatto

HTML

<div id="container"></div>

<div id="controles">
    <input id="btnAdReq" type="button" value="Adicionar Requisição"/>
    <input id="btnEnviar" type="button" value="Enviar"/>
</div>

JavaScript

var requisicoes = [];
var contReq = 1;

$( document ).ready( function(){

    $( "#btnAdReq" ).click( function() {

        var requisicao = {
            prefixoCmp: "req" + contReq,
            numero: contReq,
            label: "Requisição " + contReq,
            valor: ""
        }

        criarComponentes( requisicao );

        requisicoes[ requisicao.prefixoCmp ] = requisicao;
        contReq++;

    });

    $( "#btnEnviar" ).click( function() {
        enviar();
    });

});

function criarComponentes( requisicao ) {

    var html = "<div id='" + requisicao.prefixoCmp + "'>";
    html += "<label>" + requisicao.label + ": </label>";
    html += "<input id='" + requisicao.prefixoCmp + "txt' type='text' value='" + requisicao.valor + "'/>";
    html += "<input type='button' value='Remover' onclick='removerRequisicao(\"" + requisicao.prefixoCmp + "\")'/>";

    html += "</div>";

    $( "#container" ).append( html );

}

function removerRequisicao( idRequisicao ) {

    $( "#" + idRequisicao ).remove();
    delete requisicoes[ idRequisicao ];

}

function enviar() {

    var dados = "";

    for ( var req in requisicoes ) {
        req = requisicoes[ req ];
        var valor = $( "#" + req.prefixoCmp + "txt" ).val();
        dados += "Requisição: " + req.numero + " Valor: " + valor + "\n";
    }

    alert( dados );

}