JSFiddle - React, Tailwind, and code Playground

HTML

<table class='table'>
<tr>
<th>Name</th>
<th>Specification</th>
<th>View</th>
</tr>
<tr class='parent' id='18'>
<td><strong>Tester</strong></td>
<td>Testing what happens with duplicate project title</td>
<td>+</td>
</tr>
<tr class='child-18'>
<th>Requirement</th>
<th>Description</th>
<th>Score</th>
</tr>
<tr class='child-18'>
<td>Fill out project name and project spec</td>
<td>Give project a name and specification</td>
<td>0</td>
</tr>
<tr class='child-18'>
<td>Select a team</td>
<td>select some members for the team</td>
<td>0</td>
</tr>
<tr class='child-18'>
<td>fill out requirements and description</td>
<td>give the project some requirements</td>
<td>0</td>
</tr>
<tr class='child-18'>
<td>Submit the form</td>
<td>See if form submits as expected</td>
<td>0</td>
</tr>
</table>

JavaScript

$(document).ready(function() {
$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});