JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <div class="btn">1</div>
    <div class="btn2">a</div>
</div>
<br>
<div class="foo">
    <div class="btn">2</div>
    <div class="btn2">b</div>
</div>
<br>
<div class="foo">
    <div class="btn">3</div>
    <div class="btn2">c</div>
</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

$('.foo').each(function(){
    var trigger = $(this).find('.btn');
    var block = $(this).find('.btn2');

    trigger.hover(
        function () { 
            block.css ("background", "green"); 
        },  
        function () { 
            block.css ("background", "red"); 
        } 
    );    
});