JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="scrollToNextHighlight()"> scroll to next match</button>
<button onclick="scrollToPreviousHighlight()"> scroll to previous match</button>
<p> hello world </p><br>
<p> hello world </p><br>


             <div id="highlightDiv" style="width:200px;border-color:black;border-style:solid;height:200px;overflow-y:auto">
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<span id="myId_1" class="highlight1">id-1</span>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>

<span id="myId_2" class="highlight1">id-2</span>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>

<span id="myId_3" class="highlight1">id-3</span>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>

<span id="myId_4" class="highlight1">id-4</span>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
                 
                 </div>                                                 
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>
<p> hello world </p><br>

CSS

.highlight1{
background-color:red;
}

JavaScript

var highlightCount = 0;
var highlightedWordsCount = $('.highlight1').length;

function scrollToNextHighlight(){
   
     
    if(highlightCount < highlightedWordsCount){
       
        var elementId = $('.highlight1')[highlightCount].id ;
        alert("scrolling to elementId: "+ elementId );
        $('#highlightDiv').animate({
            scrollTop: $("#"+elementId).offset().top + 'px'
        }, 'fast');
        
       
      highlightCount = highlightCount+1;    
        
    }
}

function scrollToPreviousHighlight(){
    if(highlightCount > 0){
         highlightCount = highlightCount-1;
       
        var elementId = $('.highlight1')[highlightCount].id ;
        alert("scrolling to elementId: "+ elementId );
        $('#highlightDiv').animate({
            scrollTop: $("#"+elementId).offset().top + 'px'
        }, 'fast');
         
        
    }    
    
}