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

$("#b1").hover( 
  function () { 
    $("#t1").css ("background", "green"); 
  },  
  function () { 
    $("#t1").css ("background", "red"); 
  } 
); 

$("#b2").hover( 
  function () { 
    $("#t2").css ("background", "green"); 
  },  
  function () { 
    $("#t2").css ("background", "red"); 
  } 
);

$("#b3").hover( 
  function () { 
    $("#t3").css ("background", "green"); 
  },  
  function () { 
    $("#t3").css ("background", "red"); 
  } 
);