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 () { 
    $("#t"+i).css ("background", "green"); 
  },  
  function () { 
    $("#t"+i).css ("background", "red"); 
  } 
); 

}