JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytable">
			<tr><th>Name</th><th>Job</th><th>Time</th><th></th></tr>
			<tr><td><input id="name"/></td><td><input id="job"/></td><td><input id="time"/></td><td><div id="addPerson">+</div></td></tr>
			<tr id="calcRow"><td id="People"></td><td id="Jobs"></td><td id="TimeTotal"></td><td></td></tr>
    </table>

CSS

#addPerson, #removePerson{display:inline-block; width:40px;}

JavaScript

$("#addPerson").on('click', function(){
    alert("adding new person");
    if ($('#mytable tr').length >= 3) {
        $('#calcRow').remove();
        $('#mytable tr:last').find('td:last').empty();
        $('#mytable').append("<tr><td><input id='name'/></td><td><input id='job'/></td><td><input id='time'/></td><td><div id='addPerson'>+</div><div id='removePerson'>-</div></td></tr>");
			    	$('#mytable').append("<tr id='calcRow'><td id='People'></td><td id='Jobs'></td><td id='TimeTotal'></td><td></td></tr>");
			    }
 });

$("#removePerson").on('click', function(){
    alert("removing new person");
});