JSFiddle - React, Tailwind, and code Playground

HTML

<table id='textTable' style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
	<td>
		<button id="insertBtn" type="button" style='width:100%;'> Insert</button>
	</td>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input id='fnameText' type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input id='lnameText' type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input id='pointText' type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>
<table style="width:100%" border="1" id='mytable'>
	<thead>
		<tr>
			<th colspan="3">
			The san antonio spurs
			</th>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th> 
				<th>Points</th>
			</tr>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
<script src="layout.js"></script>
</body>
</html>

JavaScript

$(document).ready(function() {
    $('#insertBtn').click( function(){
	    $('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
    	$('#textTable input').val('')
    });

 $(".deleteClass").on("click",function() {
	    alert('row deleted');
    });
});