JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></li>
  <li><a href="#">four</a></li>
  <li><a href="#">five</a></li>
</ul>

CSS

.activeitem a{
    color:red;
}
.current{
    all:default;
}

JavaScript

$.fn.highlight = function(){
    $this = $(this);
    var index = $this.parent().index();
    $ul = $this.parent().parent();
    var i = 0;
    function doSetTimeout(){
        setTimeout(function(){
           $ul.children('li').removeClass('activeitem');
           $ul.children('li:nth-child(' + i + ')').addClass('activeitem');
            
            if (i <= index){
                doSetTimeout();
            }
            i++;
           
        },400);
    }
    doSetTimeout()   
}

$('ul li a').on('click',function(e){
  e.preventDefault();
  $(this).highlight();
})