JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<a href="#" class="button">Advance Through Results</a>
<h1><span class="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, eius maxime...

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(){
    
    // Find highlight-current, then get the next instance and make that one current
    
    $('.highlight-current').parent().nextAll(".live-search-highlight").eq(0).removeClass('live-search-highlight').addClass('highlight-current');
    
    // Reset the previous one so it's no longer current
    
    $('.highlight-current:first').removeClass('highlight-current').addClass('live-search-highlight');
    
});