JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

<button id="next">next!</button>

CSS

.selected {
    background-color: yellow;   
}

JavaScript

// basic script with next (doesn't loop)
/*
$("#next").click(function() {
    $(".selected").removeClass("selected").next().addClass("selected");
});
*/


// hack to force next to go back to first element when we are at the end
// i'm sure there is a simpler way
$("#next").click(function() {
    if ($(".selected").next().length == 0) {
        $(".selected").removeClass("selected").siblings(":nth-child(1)").addClass("selected");
    }
    else {
        $(".selected").removeClass("selected").next().addClass("selected");
    }
    
});