JSFiddle - React, Tailwind, and code Playground

by edaloicaro18

HTML

<table align="center" style="width: 100%">
    <tr>
        <td>
            <table align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <fieldset id="fldRetorno">
                            <legend>Return Details</legend>
                            <input id="addRow" type="button" value="+ Add Frame " class="button small blue" style="height: 20px;" />
                            <table id="tbRetornosModelos" class="tabla-retorno" width="100%" border="0">
                                <tbody></tbody>
                            </table>
                        </fieldset>
                    </td>
                </tr>
            </table>
            <table id="tbStructures" align="center" style="width: 70%" cellpadding="0" cellspacing="0">
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <td>
                            <input type="button" id="btnEnviar" value="Send" />
                        </td>
                    </tr>
                </tfoot>
            </table>
        </td>
    </tr>
</table>

CSS

fieldset {
    background-color: #e4eef8;
    border-style: solid;
}
.conditionInput {
    width: 20em;
    float: right;
}

JavaScript

var counter = 0; // Counter for number of rows
 var c_NombreRetorno = null;
 var c_TipoRetorno = null;

 $("#addRow").on('click', function () {
     counter = counter + 1;

     var newNombreRetorno = "NombreRetorno" + counter;
     var newTipoRetorno = "TipoRetorno" + counter;
     //Cambiar               
     var newEnlaceEstruct = "tbExp_s1_e" + counter;
     var newRow = '<tr><td style="font-weight:bold; width:100px;">Return # ' + counter + ':  </td>' +
         '<td>' + '  Name</td>' +
         '<td><input type="text" id="' + newNombreRetorno + '" />' + '</td>' +
         '<td>Data Type</td>' +
         '<td><select name="select" id="' + newTipoRetorno + '"> <option value="Seleccione" selected>Seleccione...</option> <option value="Number" >Number</option><option value="Text">Text</option></select></td>' +
         '<td><input type="button" value="-Remove" class="button small blue deleteFila"  style="height:20px;"></td>' +
         '<td><input type="hidden" id="enlace' + counter + '" value="' + newEnlaceEstruct + '" /></td>' +
         '</tr>';
     $('table.tabla-retorno >tbody').append(newRow);



     var iEst = counter;
     $('#tbStructures >tbody').append('<tr id="r' + iEst + '"></tr>');
     $('#r' + iEst).append('<td><fieldset id="e' + iEst + '"><legend>Estructure(Frame) For Retorno # ' + iEst + '</legend></fieldset></td>')
     var idEst = 'e' + iEst;
     var idSent = 's1_' + idEst;
     $('#' + idEst).append('<div><span>Expression Type</span><select id="tipoExp_' + idEst + '"></select></div><hr><fieldset id="' + idSent + '"></fieldset>');
     var idDivEst = 'div_' + idSent;
     $('#' + idSent).append('<div><select id="subTipoExp_' + idSent + '"></select></div></div><br/><div id="' + idDivEst + '"></div>');
     var idTbSent = 'tbExp_' + idSent;
     $('#' + idDivEst).append('<table id ="' + idTbSent + '" class="order-list" align="center" cellpadding="0" cellspacing="0"></table>');
     $('#' + idTbSent).append('<tbody></tbody><tfoot></tfoot>');
...