JSFiddle - React, Tailwind, and code Playground

by pepoflex

HTML

<div id="contenedor">
  <input id="unaCaja" type="text" placeholder="Ejemplo: 01">  
  <input id="unBoton" type="button" value="cliqueame!">
</div>
<!--<div id="resultadoTexto"></div>-->
  


<table>
    <thead>
		<tr>
			<th>Nombre</th>
            <th>Tipo</th>
            <th class="center">Eliminar</th>
		</tr>
	</thead>
	<tbody>
    </tbody>
</table>
<button  class='addnew'>Agregar</button>

CSS

#contenedor * {
  display: block;    
  margin: 20px;
  padding: 2px;
}

div {
  border-top: dashed 1px silver;
  border-bottom: dashed 1px silver;
  padding: 20px;
}
td,th{
    padding:7px;
    border:1px solid #eee

}
button{
    margin:10px;
}

JavaScript

window.lastId = 0;
function layout(id){
var html = '<tr>';
        //Columna 1
            html += '<td>';
            html += '<input type="text" id="box'+id+'"/>';
            html += '</td>';
        //Columna 2
            html += '<td>';
            html += '<input type="text" id="box'+id+'"/>';
            html += '</td>';
        //Columna 3
            html += '<td>';
        html += "<a href='#'onclick='$(this).parent().parent().fadeOut(400);'>Eliminar</a>";
            html += '</td>';
            html += '</tr>';
    return html;
}

$("#unBoton").click(function() {
var t = $('#unaCaja'),
    m = t.val();
    for( i = 1; i<=m; i++ ){
       
        var html = layout(window.lastId);
         window.lastId++;
        $('tbody').append(html);
        $('#unaCaja').val('');
  
    }
});
$('.addnew').on('click', function(){
    var html = layout(window.lastId);
         window.lastId++;
        $('tbody').append(html);
        $('#unaCaja').val('');
});