JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn" id="b1">1</div>
<div class="btn2" id="t1">a</div>
<br><br>

<div class="btn" id="b2">2</div>
<div class="btn2" id="t2">b</div>
<br><br>

<div class="btn" id="b3">3</div>
<div class="btn2" id="t3">c</div>
<br><br>

CSS

.btn {
    display: inline-block;
    background: #999999;
    width: 40px;
    height: 40px;
    text-align: center;
}

.btn2 {
    display: inline-block;
    background: red;
    width: 20px;
    height: 20px;
    text-align: center;
}

JavaScript

for ( var i = 1; i <= 3; i++ ) { 

$("#b"+i).hover( 
    function (i) { return function() {
    $("#t"+i).css ("background", "green"); 
    }}(i),  
  function (i) { return function() {
    $("#t"+i).css ("background", "red"); 
  }}(i)
); 

}