JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ldrm-rubric-loaded">
					
		<table class="ldrm" cellspacing="0">
			<thead>
				<tr class="remove">
					<th></th>
					<th></th>
					<th></th>
				<th><span class="btn"></span></th><th><span class="btn"></span></th><th><span class="btn"></span></th></tr>
				<tr class="points">
					<th></th>
					<th></th>
					<th class="rb-top">8</th>
				<th class="rb-top">6</th><th class="rb-top">4</th><th class="rb-top">2</th></tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td class="rb-left">Category</td>
					<td class="choice">Enter the details of how to earn this amount of points!</td>
				<td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td></tr>
			<tr><td><span class="btn"></span></td><td class="rb-left">Category</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td></tr><tr><td><span class="btn"></span></td><td class="rb-left">Category</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td></tr><tr><td><span class="btn"></span></td><td class="rb-left">Category</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to earn this amount of points!</td><td class="choice">Enter the details of how to...

CSS

#ldrm-rubric-loaded {
	margin-top:15px;
}
#ldrm-rubric-loaded .ldrm tr.remove {
	display:none;
}
#ldrm-rubric-loaded .ldrm tr.points th:first-child {
	display:none;
}
#ldrm-rubric-loaded .ldrm tbody tr td:first-child {
	display:none;
}
#ldrm-rubric-loaded .choice {
	cursor:pointer;
}
#ldrm-rubric-loaded .choice.selected {
	background:#d1e0be;
}

JavaScript

var pointsEarned = 0;
jQuery('#ldrm-rubric-loaded td.choice').click(function () {
		jQuery(this).addClass('selected');
		jQuery(this).siblings().removeClass('selected');
		var trackChanges = jQuery('#ldrm-rubric-loaded').clone().html();
		jQuery('#ldrm_assignment_content').val(trackChanges);
});


jQuery('#ldrm-rubric-loaded td.choice').click(function () {
		// Obtain points earned
		var ndx = jQuery(this).index() + 1;
		var target = jQuery('#ldrm-rubric-loaded thead tr.points th:nth-child('+ndx+')').html();
		if(!isNaN(target) && target.length != 0) {
			pointsEarned += parseFloat(target);
		}
		jQuery('#ldrm-points-earned').html('Points Earned: '+pointsEarned);
        alert(pointsEarned);
	});