JSFiddle - React, Tailwind, and code Playground

HTML

<table class="pohelpTbl">
    <tbody>
        <tr>
            <td width="10%" align="left"><input type="checkbox" value="69914" name="poSelect[]" class="poSelect" /></td>
            <td width="20%" align="left">A book</td>
            <td width="60%" align="left">02/20/2013 by Darius Davis</td>
            <td width="10%" align="left" class="expIco">[-]</td>
        </tr>
    </tbody>
</table>
<div style="" class="expandBox">
    <div class="recRow">
        <table class="subhelpTbl">
            <thead>
                <tr>
                    <th><input type="checkbox" value="169921_2" name="rcptSelect[]" /></th>
                    <th>Page</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td>1</td>
                    <td>13.99</td>                    
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>2</td>
                    <td>12.99</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>3</td>
                    <td>15.00</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="recRow">
        <table class="subhelpTbl">
            <thead>
                <tr>
                    <th><input type="checkbox" value="169921_3" name="rcptSelect[]" /></th>
                    <th>Page</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td>6</td>
                    <td>16.99</td>                    
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>7</td>
                    <td>18.95</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>8</td>
           ...

CSS

.pohelpTbl {
	width:100%;
	margin:10px auto;
	border-collapse: collapse;
}
.pohelpTbl th {
	text-align:left;
	text-decoration:underline;
}
.pohelpTbl tbody tr:hover {
	background-color:#F5F4F7;
	border:none;
	cursor:pointer;
}
.pohelpTbl a {
	color:#000;
}
.subhelpTbl {
	width:400px;
	margin:5px auto;
	border-collapse: collapse;
	font-size:11px;
	color:#595753;
	font-family:Tahoma;
	text-align:center;
}
.subhelpTbl th {
	text-align:center;	
}
.subhelpTbl tr td {
	margin:10px 0;
}
.subhelpTbl a {
	color:#000;
	text-decoration:underline;
}
.dateRec {
	font-size:12px;
	font-weight:bold;
}
.recSelect {
	width:20px;
	height:20px;
}
.recRow {
	padding:10px 0;
	border-bottom:1px solid #CFCFD1;
}
.expandBox h4 {
	padding:0 0 5px 0;
	border-bottom:1px solid #CFCFD1;
}
.expIco {
	font-size:12px;
}
.poLink {
	color:#000;
	text-decoration:none;
}
.poLink:hover {
	text-decoration:underline;
}

JavaScript

$(document).ready(function() { 
		
	
		// Collapsible Tables - 2/21/13
		$('.expIco').click(function() {
			var txt = $(this).text() == '[+]' ? '[-]' : '[+]';
			$(this).text(txt);
			$(this).parents('.pohelpTbl').next('.expandBox').slideToggle(100);
		});
		
		// Select all descendant receipts if PO is selected.
 		$('.poSelect').click(function() {
			var expandBox	= $(this).parents('.pohelpTbl').next('.expandBox');
			var receipts	= expandBox.find('input[type="checkbox"]');
			
			if ($(this).is(':checked')) {
				var status = true;
			} else {
				var status = false;
			}
			
			$(receipts).each(function (i) {
				var cb = $(this);
				cb.attr("checked",status);			
			});
		});
});