JSFiddle - React, Tailwind, and code Playground

by Arun P Johny

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>
            ...

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 () {
    var $this = jQuery(this),
        $tr = $this.closest('tr'),
        prevValue = $tr.data('selected') || 0;

    // Obtain points earned
    var ndx = $this.index() + 1;
    var value = +jQuery('#ldrm-rubric-loaded thead tr.points th:nth-child(' + ndx + ')').html() || 0;
    pointsEarned -= prevValue;
    pointsEarned += value;
    
    $tr.data('selected', value)
    jQuery('#ldrm-points-earned').html('Points Earned: ' + pointsEarned);
    alert(pointsEarned);
});