JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<ul class="list1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

<ul class="list2">
    <li>A5</li>
    <li>A4</li>
    <li>A2</li>
    <li>A1</li>
    <li>A3</li>
</ul>

CSS

.hovered {
    background: gray;
    color: white;
    font-weight: bold;
}

ul {
    float: left;
    width: 200px;
    margin-right: 10px;
}

JavaScript

$('.list1 li,.list2 li').hover(function() {
    $(this).addClass('hovered')
        .siblings()
        .removeClass('hovered');
    $($(this).closest('ul').is('.list1')?'.list2 li':'.list1 li').eq($(this).index())
        .addClass('hovered')
        .siblings()
        .removeClass('hovered');
});