JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="find_me">
<button id="find">Find</button>
<button id="next">Next</button>
<button id="prev">Prev</button>
<div id="Test" style="width: 700px;height: 150px;overflow: scroll;">
Loram Ipsum Warn Loram Ipsum Warn Loram Ipsum Warn <br/>
Loram Ipsum Warn Loram Ipsum Warn Loram Ipsum Warn <br/>
Loram Ipsum Warn Loram Ipsum Warn Loram Ipsum Warn <br/>
Loram Ipsum Warn Loram Ipsum Warn Loram Ipsum Warn

</div>

CSS

.red { color: red}
.selected { background-color : black }

JavaScript

var next_index = 0;
var indexes;
var prev_index = 0;

$("#find").on('click', function() {
    prev_index = 0;
    next_index = 0;
    var span = $("#Test").find('span');
    if($(span).length) {
    	$(span).contents().unwrap();
    }
    var find = $("#find_me").val();
    console.log(find);
	 var text = $("#Test").text();
    var rg = new RegExp(find, 'g');
    indexes = text.match(rg);
     $("#Test").html(function(_, html){
        return html.replace(rg, '<span class="red">'+find+'</span>');   
     });
});
$("#next").on('click', function() {
    $("body").find('span.red').eq(prev_index).removeClass('selected'); 
    if(prev_index > 0) {
      next_index = prev_index + 1;
      prev_index = -1;
    } else if (next_index > indexes.length - 1) {
        next_index = 0;
    }
    console.log(next_index);
$("body").find('span.red').eq(next_index-1).removeClass('selected');         $("body").find('span.red').eq(next_index).addClass('selected');
	next_index++;
});

$("#prev").on('click', function() {
    $("body").find('span.red').eq(next_index).removeClass('selected'); 
     if(next_index > 0) {
      prev_index = next_index - 1;
      next_index = -1;
    } else if (prev_index < 0) {
        prev_index = indexes.length - 1;
    }
    console.log(prev_index);

	prev_index--;

    $("body").find('span.red').eq(prev_index+1).removeClass('selected');         $("body").find('span.red').eq(prev_index).addClass('selected');
    
 });