JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="product-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
<ul class="product-info">
    <li>info 1</li>
    <li>info 2</li>
    <li>info 3</li>
</ul>

JavaScript

var jq_info = $('.product-info li').hide();
var tm = null, 
    tm_index=0, 
    info_len = jq_info.length;

function show(index){
   clearTimeout(tm);
   
   if (index != undefined) tm_index = index;
  
   if (tm_index >= info_len) tm_index = 0;
    
   jq_info.hide().eq(tm_index).show();
   if (++tm_index >= info_len) tm_index=0;
   
   
   tm = setTimeout(show, 3000);   
}

$('.product-list a').mouseover(function(){
    show($(this).closest('li').index());
})

show(0);