JSFiddle - React, Tailwind, and code Playground

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');
});