JSFiddle - React, Tailwind, and code Playground

by Renato Andrade

HTML

<form method="post" action="inserir5.php"  name="dados-do-cliente" enctype="multipart/form-data">
    <div id="container">
        <table>
            <tr>
                <td align="center" colspan="2"><h1>Trabalhadores:</h1></td>
            </tr>
            <tr>
                <td>Nome: </td>
                <td><input type="text" name="nome_1"/></td>
            </tr>
            <tr>
                <td>Função: </td>
                <td><input type="text" name="funcao_1"/></td>
            </tr>
            <tr>
                <td align="center" colspan="2"><h1>Documentos  Trabalhadores: </h1></td>
            </tr>
            <tr>
                <td colspan="2"><h2>Fichas de aptidão medica:</h2></td>
            </tr>
            <tr>
                <td>Data Validade: </td>
                <td><input type="date" name="MedicaValidade_1"/></td>
            </tr>
            <tr>
                <td>Anexar Documento: </td>
                <td><input type="file" name="MedicaAnexo_1"/></td>
            </tr>
        </table>
    </div>
    <p><input type="submit" style='width: 120px' value="Gravar"/></p>
    <p><input type="button" name="add" id="add" value="Adicionar"/></p>
</form>

JavaScript

var i = 1;
$('#add').click(function(){
    i++;
    var table = '<br>';
    table +=     '<table>'
    table +=         '<tr>'
    table +=             '<td align="center" colspan="2"><h1>Trabalhadores:</h1></td>'
    table +=         '</tr>'
    table +=         '<tr>'
    table +=             '<td>Nome: </td>'
    table +=             '<td><input type="text" name="nome_'+i+'"/></td>'
    table +=         '</tr>'
    table +=         '<tr>'
    table +=             '<td>Função: </td>'
    table +=             '<td><input type="text" name="funcao_'+i+'"/></td>'
    table +=         '</tr>'
    table +=         '<tr>'
    table +=             '<td align="center" colspan="2"><h1>Documentos  Trabalhadores: </h1></td>'
    table +=         '</tr>'
    table +=         '<tr id="fichas_aptidao">'
    table +=             '<td colspan="2"><h2>Fichas de aptidão medica:</h2></td>'
    table +=         '</tr>'
    table +=         '<tr>'
    table +=             '<td>Data Validade: </td>'
    table +=             '<td><input type="date" name="MedicaValidade_'+i+'"/></td>'
    table +=         '</tr>'
    table +=         '<tr>'
    table +=             '<td>Anexar Documento: </td>'
    table +=             '<td><input type="file" name="MedicaAnexo_'+i+'"/></td>'
    table +=         '</tr>'
    table +=     '</table>'   
    $('#container').append(table);
})