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>Question</th><th>Unanswered</th><th>Fully Successful</th><th>Exceptional</th><th>Needs Improvement</th></tr>
            <tr><td>Question</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Question</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Question</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Question</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
            <tr><td>Question</td><td class="toggle">&#10004;</td><td></td><td></td><td></td></tr>
   ...

CSS

td{
    text-align: center;
}

td.toggle{
    background-color: green;
    
}
tr > td:nth-child(2).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(){
    index = $(this).parent().parent().prevAll('.dropdowns').length;
    colTemp = $(this).val();
    col = (colTemp == '') ? 1 : parseInt(colTemp) + 1;
    row = $('select').index(this) + index + 1;
    $("tr:eq(" + row + ") > td:gt(0)").html('').removeClass('toggle'); //must be a better way than this
    $("tr:eq(" + row + ") > td:eq("+ (col) + ")").html('&#10004;').addClass('toggle');
});