JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Set 1</h3>
<div class="dropdowns">
    <div>
    <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 />
    <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>
    </div>
    <div>
    <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>
    </div>    
</div>
<div class="clearFix"></div>
    <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>
<h3>Set 2</h3>
<div class="dropdowns">
    <div>
    <select id="data6">
        <option...

CSS

td{
    text-align: center;
}

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

div.dropdowns{
    width:100%;
}

div.dropdowns div{
    display:inline-block;
    width: 200px;
}

div.dropdowns > *{
    vertical-align: top;
}

table{
    margin-top: 20px;    
}

JavaScript

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