JSFiddle - React, Tailwind, and code Playground
HTML
<form name="form_invitaciones" id="form_invitaciones" action="" method="post">
<input type="hidden" name="cols" id="cols" value="1">
<fieldset>
<table width="100%" id="tabla_empresas">
<thead>
<tr>
<th width="2%"> </th>
<th width="15%">Nombre</th>
<th width="15%">Apellidos</th>
<th width="10%">RUT</th>
<th width="15%">Email</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="number-row">1</td>
<td>
<input name="usuario[nombre][]" type="text" required="required" value="" size="20" />
</td>
<td>
<input name="usuario[apellidos][]" type="text" required="required" class="texto" value="" size="20" />
</td>
<td>
<input name="usuario[rut][]" type="text" required="required" class="texto rut" value="" size="20" />
</td>
<td>
<input name="usuario[email][]" type="email" required="required" class="texto" value="" size="30" />
</td>
<td>
<a href="#" class="addnew">Agregar</a>
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
JavaScript
$(document).ready(function() {
var numero_fila = parseInt($('#cols').val());
$('.addnew').click(function(e) {
e.preventDefault();
var $row = $('tr:last').clone();
$row.find('input').val('');
$row.find('.addnew').removeClass('addnew').addClass('remove').html('Remover');
numero_fila += 1;
if(numero_fila > 10) {
alert('Lo sentimos solo puede enviar un maximo de 10 invitaciones simultaneas.');
return false;
}
$('#cols').val(numero_fila);
$row.find('.number-row').html(numero_fila);
$row.appendTo('tbody:last');
console.log('add: ' + numero_fila);
$('.remove').on('click', function(e) {
e.preventDefault();
numero_fila -= 1;
$('#cols').val(numero_fila);
$(this).parent().parent().remove();
});
});
function renumber() {
$.each($('.number-row'), function(index, value) {
$(value).html(index + 1);
console.log('reorder');
});
}
});