JSFiddle - React, Tailwind, and code Playground

by jencinas69

HTML

<select id="data">
        <option selected="selected"></option>
        <option value="1">Fully Successfuly</option>
        <option value="2">Exceptional</option>
        <option value="3">Needs Improvement</option>
    </select>
    
    <br>
    <br />
    <select id="data2">
        <option selected="selected"></option>
        <option value="1">Fully Successfuly</option>
        <option value="2">Exceptional</option>
        <option value="3">Needs Improvement</option>
    </select>
    
    <br />
    <select id="data3">
        <option selected="selected"></option>
        <option value="1">Fully Successfuly</option>
        <option value="2">Exceptional</option>
        <option value="3">Needs Improvement</option>
    </select>
    
    <br />
    <select id="data4">
        <option selected="selected"></option>
        <option value="1">Fully Successfuly</option>
        <option value="2">Exceptional</option>
        <option value="3">Needs Improvement</option>
    </select>
    
    <br />
    <select id="data5">
        <option selected="selected"></option>
        <option value="1">Fully Successfuly</option>
        <option value="2">Exceptional</option>
        <option value="3">Needs Improvement</option>
    </select>
    
    <table border="1"> 
            <tr><th>Unanswered</th><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
            <tr><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
    </table>

CSS

td{
    text-align: center;
}

td.toggle{
    background-color: green;
    
}
tr > td:first-child.toggle{
        background-color: red;
}

JavaScript

$("select").change(function(){
    col = $(this).val();
    row = $('select').index(this);
    $("tr:eq(" + (row + 1) + ") > td").html('').removeClass('toggle'); //must be a better way than this
    $("tr:eq(" + (row + 1) + ") > td:eq("+ (col) + ")").html('&#10004;').addClass('toggle');
});