JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

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

JavaScript

const addClassHover = (() => {
  document.querySelectorAll('img[class*=item-]').forEach(
    e => {
    //console.log(Array.from(e.classList).filter(classItem => {classItem.startsWith("item-")}));
      let classItemName = [...e.classList].filter(classItem => {
      //console.log(classItem.startsWith("item-"));
        return classItem.startsWith("item-")});
      //console.log(classItemName);
      classItemName.forEach(cIN => {
        document.querySelectorAll('li[class*='+cIN+']').forEach(
          f => {  
            e.addEventListener('mouseenter', function(event) {
              f.classList.toggle('test')
            })        
          })
      })
    })
})()