JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="productlist">
  <li><a href="#" class="product-link" data-target="#box1">Link 1</a></li>
  <li><a href="#" class="product-link" data-target="#box2">Link 2</a></li>
  <li><a href="#" class="product-link" data-target="#box3">Link 3</a></li>
</ul>

<div class="panel-overview boxlink" id="box1"> Something goes here 1 </div>
<div class="panel-overview boxlink" id="box2" style="display: none;"> Something goes here 2 </div>
<div class="panel-overview boxlink" id="box3" style="display: none;"> Something goes here 3 </div>

JavaScript

var $links = $('.product-link'), current_id = 0, timeout;
    $links.mouseover(function(el) {
        var $this = $(this);       
        $this.addClass("hover")
        showLink($this);
        clearTimeout(timeout);
    });  
    
    $links.mouseleave(function(el) {
        var $this = $(this);
        $this.removeClass("hover");
        timeout = setTimeout(cycle, 1000);
    });
    
    function showLink($link){
        var currentLink = $($links[current_id]);
        $(currentLink.data("target")).hide();
        $($link.data("target")).show();
        current_id = $link.parent().index();
    } 
    
    function cycle(){
        if($links.filter(".hover").length == 0){
            var next_id = (current_id + 1) % $links.length;
            showLink($($links[next_id]));
            timeout = setTimeout(cycle, 1000); 
        }           
    }
    timeout = setTimeout(cycle, 1000);