JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<table border="1">
    <tr>
        <!-- Table Header -->
        <td>Checkbox</td>
        <td>Items</td>
        <td>Area 1</td>
        <td>Area 2</td>
        <td>Area 3</td>
    </tr>
    <tr id="checkRow">
        <!-- Row 1 -->
        <td>
            <form>
                <input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);" />
            </form>
        </td>
        <td>Item 1</td>
        <td class="imageBox">
            <img id="image1" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image2" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image3" src="no.png" alt="Needed" />
        </td>
    </tr>
    <tr id="checkRow">
        <!-- Row 2 -->
        <td>
            <form>
                <input type="checkbox" name="Row2" value="Row2" onchange="onCheck(this);" />
            </form>
        </td>
        <td>Item 2</td>
        <td class="imageBox">
            <img id="image1" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image2" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image3" src="no.png" alt="Needed" />
        </td>
    </tr>
    <tr id="checkRow">
        <!-- Row 3 -->
        <td>
            <form>
                <input type="checkbox" name="Row3" value="Row3" onchange="onCheck(this);" />
            </form>
        </td>
        <td>Item 3</td>
        <td class="imageBox">
            <img id="image1" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image2" src="yes.png" alt="Needed" />
        </td>
        <td class="imageBox">
            <img id="image3" src="yes.png" alt="Needed" />
        </td>
    </tr>
    <tr id="checkRow">
        <!-- Row 4 -->
        <td>
            <form>
                <input type="checkbox" name="Row4" value="Row4"...

JavaScript

//Numbers in the total row (Summation)
var total1 = 0;
var total2 = 0;
var total3 = 0;

window.onCheck = function(cb) {
    var $box = $(cb);
    var imageBoxes = $box.closest('tr.checkRow').find('td.imageBox');
console.log('imageBoxes - ' + imageBoxes.length);
    if (cb.checked === true) {
console.log('checked');
        //Checks the image in the row. If it is yes.png, it adds 1 to to the total
        //for that column and displays that total variable in the total row. 

        /*if(document.getElementById('image1').src.toString().indexOf('yes')>0){
                total1++;
                document.getElementById('total1').innerHTML=total1;

            } */
        if (imageBoxes[0].attr('src').toString().indexOf('yes') > 0) {
            total1++;
            imagesBoxes[0].html(total1);

        }
        /*else
            {
                document.getElementById('total1').innerHTML=no;
            } */

        if (document.getElementById('image2').src.toString().indexOf('yes') > 0) {
            total2++;
            document.getElementById('total2').innerHTML = total2;

        }
        /* else
            {
                document.getElementById('total2').innerHTML=no;
            } */

        if (document.getElementById('image3').src.toString().indexOf('yes') > 0) {
            total3++;
            document.getElementById('total3').innerHTML = total3;

        }
        /*else
            {
                document.getElementById('total3').innerHTML=no;
            }  */
    }
    //If the checkbox is unchecked, this checks for
    //if the image in each box in that row is
    //yes.png. If it is, then 1 is subtracted from the
    //column's total and the new total is shown.
    else {
        if (document.getElementById('image1').src.toString().indexOf('yes') > 0) {
            total1--;
            document.getElementById('total1').innerHTML = total1;
        }

        if (document.getElementById('image2').src.toString().indexOf('yes') > 0)...