JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

CSS

li.hover { color: #f00; }
ul { float: left; margin: 10px; border: 1px solid #000; padding: 5px; }

JavaScript

$('.list > li').hover(function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').addClass('hover');
}, function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').removeClass('hover');
});