JSFiddle - React, Tailwind, and code Playground

by marceloC

HTML

<input type="button" id="agregar_fulanitos" value="Agregar fulanitos" />

<table id="main" width="100%" border="1">
    <tbody>
    <tr><td>fulanito xxxx</td></tr>
    <tr class="base_main"><td>fulanita yyyyyy</td></tr>
    </tbody>
</table>

<div id="container">
  <table id="tabla" width="100%" >
    
	<thead>
        <tr><td colspan="4"><input type="button" id="agregar" value="Agregar fila" /></td></tr>
		<tr>
			<th>Nombre</th>
			<th>Apellidos</th>
			<th>Sexo</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
 
	<tbody>
 
		<!-- fila base para clonar y agregar al final -->
		<tr class="fila-base">
			<td><input type="text" class="nombre" /></td>
			<td><input type="text" class="apellidos" /></td>
			<td>
				<select class="sexo">
					<option value="0">- Sexo -</option>
					<option value="M">Masculino</option>
					<option value="F">Femenino</option>
				</select>
			</td>
			<td class="eliminar">Eliminar</td>
		</tr>
		<!-- fin de código: fila base -->
 
		
 
	</tbody>
    
</table>
<!-- Botón para agregar filas -->

        </div>

CSS

#container{
   display:none;
    }

JavaScript

$(function(){
    $("#agregar_fulanitos").on('click', function(){
        $("#tabla").hide();
		$("<tr><td>xxxxxx</td></tr>").appendTo("#main").on('click', function(){
        $("#tabla").insertAfter(this).fadeToggle(2000);
	});
	          });
    
    $("#main tr").on('click', function(){
        $("#tabla").insertAfter(this).fadeToggle(2000);
	});
    
    $("#agregar").on('click', function(){
		$("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
	});	
    
 
	$(document).on("click",".eliminar",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
	});
});