JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th id="A" >a</th>
        <th id="B" >b</th>
    </tr>
</table>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>

CSS

.a {
    width:50px;
    height:50px;
    background-color:blue;
    margin-top:15px;
}
.b {
    width:50px;
    height:50px;
    background-color:red;
    margin-top:10px;
}
th {
    padding:20px;
    width:30px;
    height:30px;
    background-color:green;
}

JavaScript

window.onload=function(){
    var aColl = document.getElementsByClassName('a');
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });
    document.getElementById('A').addEventListener('mouseout', function(){
        changeColor(aColl, 'blue');
    });
    
    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
    
    document.getElementById('B').addEventListener('mouseout', function(){
        changeColor(bColl, 'red');
    });
}
function changeColor(coll, color){
   
    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}