JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="button">Advance Through Results</a>
<h1><span class="live-search-highlight highlight-current">Lorem</span> ipsum</h1> dolor sit amet, consectetur fadipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> 1
<ul>
<li>test</li>
<li><b>test</b></li>
<li><span class="live-search-highlight">Lorem</span></li>
</ul>
<span>tenetur</span> sequi officiis inventore voluptates, amet, eius maxime reiciendis odio, dolores velit cumque. Libero praesentium assumenda odit!<span class="live-search-highlight">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> tenetur sequi officiis inventore voluptates, amet, eius maxime reiciendis odio, dolores velit cumque. Libero praesentium assumenda odit!<span class="live-search-highlight">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> tenetur sequi officiis inventore voluptates, amet, eius maxime reiciendis odio, dolores velit cumque. Libero praesentium assumenda odit!<span class="live-search-highlight">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> tenetur sequi officiis inventore voluptates, amet, eius maxime reiciendis odio, dolores velit cumque. Libero praesentium assumenda odit!<span class="live-search-highlight">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> tenetur sequi officiis inventore voluptates, amet, eius maxime reiciendis odio, dolores velit cumque. Libero praesentium assumenda odit!<span class="live-search-highlight">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Illo impedit numquam sit do<span class="live-search-highlight">lorem</span> tenetur sequi officiis inventore voluptates, amet,...
CSS
body {
font-family:sans-serif;
font-size:14px;
}
.live-search-highlight {
background:#F9EBB3;
}
.highlight-current {
background:#F2C100;
}
a:link, a:visited {
display:inline-block;
text-decoration:none;
background:#444;
padding:5px 10px;
color:#fff;
border-radius:10px;
}
a:hover {
background:#000;
}
JavaScript
$(document.body).on('click','.button', function(){
var $highlights = $('.live-search-highlight'),
$currHighlight = $highlights.filter('.highlight-current').removeClass('highlight-current'),
nextIndex = $highlights.index($currHighlight)+1;
if(nextIndex === $highlights.length){
nextIndex = 0;
}
$highlights.eq(nextIndex).addClass('highlight-current');
});