JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot; type=&quot;text/javascript"></script>

	<body>
		
		<h2>Task Set</h2>
		<form id="taskList" style="width:60%">
			<fieldset>
				<table id="taskTable" style="width:100%">
					<tr>
						<th style="text-align:left">Task Number</th>
						<th style="text-align:left"><abbr title="Total amount of time the task needs to run to finish execution.">Computation Time</abbr></th>
						<th style="text-align:left"><abbr title="Does the task need exclusive use of the resource?">Resource Needed</abbr></th>
						<th style="text-align:left"><abbr title="How often the task will repeat itself.  Acts as a deadline since it must complete before restarting.">Deadline/Period</abbr></th>
						<th style="text-align:left"><abbr title="Any number representing a task's priority.  Higher numbers will be given precedence.">Priority</abbr></th>
					</tr>
					<tr>
						<td>T1</td>
						<td><input id="compTime_T1" value="5"/></td>
						<td>
							<select id="resNeeded_T1" name="res_T1">
								<option value="yes">Yes</option>
								<option value="no">No</option>
							</select>
						</td>
						<td><input id="period_T1" value="20"/></td>
						<td><input id="priority_T1" value="0"/></td>
					</tr>
				</table>
				<button id="addTaskButton">Add task...</button><br><br>
				<input type="button" id="submitTaskSet" value="Generate Schedule"/>
				<input type="button" id="resetTable" value="Clear Schedule"/>
			</fieldset>
		</form>
		
		<div id="scheduleInfo" hidden>
			<h2>Visualization</h2>
			<div id="visual">
				<!-- attributes will mostly be set using javascript -->
				<canvas id="visual_T1"></canvas>
			<div/>
			
			<h2>Calculations</h2>
			<div id="calculations">
				Notable information goes here
			</div>
		</div>
		
	</body>

JavaScript

$('#submitTaskSet').click(function () {generateSchedule();});
	$('#resetTable').click(function () {resetTaskSet();});
	
	//Variables
	var taskTableRows = 1;

	$('#addTaskButton').click(function(e) {
		taskTableRows += 1;
		var taskNumStr = taskTableRows.toString();
		//var table = document.getElementById("taskTable");
		//var row = table.insertRow(taskTableRows);
		//var cellTaskNum = row.insertCell(0);
		//var cellCompTime = row.insertCell(1);
		//var cellRes = row.insertCell(2);
		//var cellPeriod = row.insertCell(3);
		//var cellPrio = row.insertCell(4);
		var newRow = "<tr><td>T" + taskNumStr + "</td>" + 
			"<td><input id=\"compTime_T" + taskNumStr + "\" value=\"5\"/></td>" +
			"<td><select id=\"resNeeded_T" + taskNumStr + "\" name=\"res_T" + taskNumStr + "\">" + 
			"<option value=\"yes\">Yes</option>" +
			"<option value=\"no\">No</option></select></td>" +
			"<td><input id=\"period_T" + taskNumStr + "\" value=\"20\"/></td>" +
			"<td><input id=\"priority_T" + taskNumStr + "\" value=\"0\"/></td></tr>";
		$('#taskTable tr:last').after(newRow);
	});