JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="name" placeholder="name">
<input type="text" id="hobby" placeholder="hobby">
<input type="text" id="crush"placeholder="crush">
<button id="prepend-row-button">Prepend Row</button>

<div id="magic-table">
<table>
	<tr>
		<td>Tom</td>
		<td>Cycling</td>
		<td>Pizza</td>
	</tr>
	<tr>
		<td>Luke</td>
		<td>Driving</td>
		<td>Basketball</td>
	</tr>
</table>
</div>

JavaScript

$('#prepend-row-button').click(function() {
    
    var name = $('#name').val();
    var hobby = $('#hobby').val();
    var crush = $('#crush').val();
    
    var row = $('<tr><td>' + name + '</td><td>' + hobby + '</td><td>' + crush + '</td></tr>').hide();

    
    $('#magic-table > table').prepend($(row));
    
    $(row).fadeIn("slow");
});