JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
<img data-cible="coucou" src="coucou.jpg" class="item item-coucou">
<img data-cible="hi" src="hi.jpg" class="item item-hi">
<img data-cible="salut" src="salut.jpg" class="item item-salut">
<img data-cible="adi" src="adi.jpg" class="item item-adi">
</div>

<ul>
<li id="coucou" class="item item-coucou">Coucou !</li>
<li id="hi" class="item item-hi">Hi !</li>
<li id="salut" class="item item-salut">Salut !</li>
<li id="adi" class="item item-adi">Adi !</li>
</ul>

CSS

.test
{
  color:red;
  background-color:yellow;
}

JavaScript

const addClassHover = (() => {
  document.querySelectorAll('img[data-cible]').forEach(
    e => {
      e.addEventListener('mouseenter', function(event) {
        document.getElementById(e.dataset.cible).classList.toggle('test');
      })
    })
})();