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">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>NOMBRE</th>
            <th>APELLIDO</th>
            <th>CARGO</th>
            <th>&nbsp;</th>
        </tr>
       </thead>
    <tbody id="mainBody">
     <tr>
         <td><a class="show" href="#">+</a></td>
        <td>fulanito </td>
        <td>XXXXXXXX</td>
        <td>AAAAAAAA</td>
         <td class="eliminar_fula">eliminar</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>Tipo Telefono</th>
			<th>Numero</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
 
	<tbody>
		<!-- fila base para clonar y agregar al final -->
		<tr class="fila-base">
			<td>
				<select class="sexo">
					<option value="0">- Sexo -</option>
					<option value="M">Masculino</option>
					<option value="F">Femenino</option>
				</select>
			</td>
            <td><input type="text" class="nombre" /></td>
			<td class="eliminar">Eliminar</td>
		</tr>
		<!-- fin de código: fila base -->
 	</tbody>
</table>
    
    <!-- -->
  <table id="tabla2" width="100%" >
	<thead>
        <tr><td colspan="4"><input type="button" id="agregar2" value="Agregar fila" /></td></tr>
		<tr>
			<th>Tipo Email</th>
			<th>Email</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
 
	<tbody>
		<!-- fila base para clonar y agregar al final -->
		<tr class="fila-base2">
			<td>
				<select class="sexo">
					<option value="0">- Sexo -</option>
					<option value="M">Masculino</option>
					<option value="F">Femenino</option>
				</select>
			</td>
            <td><input type="text" class="nombre" /></td>
			<td class="eliminar">Eliminar</td>
		</tr>
		<!-- fin de código: fila base -->
 	</tbody>
</table>
    
        </div>

CSS

#container{
   display:none;
    }

JavaScript

$(function(){
    $("#agregar_fulanitos").on('click', function(){
        $("#container").hide();
		$("<tr><td><a class='show' href='#'>+</a></td><td>xxxxxx</td><td>yyyy</td><td>yyyy</td><td class='eliminar_fula'>eliminar</td></tr>").appendTo("#main #mainBody").on('click', function(){
        $("#container").insertAfter(this).fadeToggle(2000);
	});
	          });
    
    $(document).on("click",".eliminar_fula",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
	});
    
    
    $(".show").on('click', function(){
        $("<tr class='new'><td colspan='5'></td></tr>").appendTo("#main #mainBody")
       $("#container").insertAfter("#main #mainBody .new").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();
	});
    
     $("#agregar2").on('click', function(){
		$("#tabla2 tbody tr:eq(0)").clone().removeClass('fila-base2').appendTo("#tabla2 tbody");
	});	

	$(document).on("click",".eliminar",function(){
		var parent = $(this).parents().get(0);
		$(parent).remove();
	});
});