JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<hr>
<button class="gonext">Got to Next</button>
<hr>

<div class="main">
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
    <div><span class="highlighted">a</span></div>
    <div><span class="highlighted">s</span></div>
    <div><span class="highlighted">v</span></div>
</div>

<pre class="console">
</pre>

CSS

.main {
  height: 100px;
  border:1px solid grey;
  padding: 10px 20px;
  overflow: scroll;
  display:block;
}

.console {
  display:block;
  height:100px;
  border:1px solid grey;
  padding: 10px 20px;
  overflow: scroll;
}

JavaScript

(function($){
    var itemsLength  = $('div.main div span.highlighted').length;
    var curIndex     = 0;
    var cwindow      = $('.console');
		var button       = $('button.gonext');
    
    var consolelog = function(message){
    	var text  = cwindow.innerHTML;
      message += "\n";
      cwindow.prepend(message);
    };
    
    var gonext = function(){
       consolelog('Button:click:curIndex:'+curIndex);
       consolelog('Button:click:itemLength:'+itemsLength);
        
       var listItem = $( "div.main div span.highlighted" ).eq( curIndex );
       // all black
       $("div.main div span.highlighted").css("color", "black");
       // current red 
       listItem.css("color", "red");
        
        curIndex ++;
        if(curIndex > itemsLength) curIndex = 0;
    };
    
    button.click(function(){
    	gonext();
    });
})(jQuery)