JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

<ul id="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

CSS

.hidden
{
float: left;
display: none;
width: 150px;
height: 150px
}

.something
{
float: left;
width: 150px;
height: 150px
}

JavaScript

$(function() {
        $("#grid li").hover(
            function (e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).show();
                },
            function(e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).hide();
            }
        );
    });