JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page active">div 1</div>
<div class="page">div 2</div>
<div class="set">
    <div class="page">set 1 - div 1</div>
    <div class="page">set 1 - div 2</div>
    <div class="page">set 1 - div 3</div>
</div>
<div class="page">div 5</div>
<div class="set">
    <div class="page">set 2 - div 1</div>
    <div class="page">set 2 - div 2</div>
</div>
<div class="page">div 6</div>
<button class="next-btn">Next</button>

CSS

.active {
  color: red;
}
.next-btn {
  cursor: pointer;
}

JavaScript

$(function() {
  $('button').click(function() {
    var elem = $(".page.active").toggleClass('active'); // current active element
    var nextElem = elem.next();	// next element

		// go above one level and get next element
    // if no next element exists, means end of the child level
		if (!nextElem.length) {
    	nextElem = elem.parent().next();
    }

		// if next element has some PAGE children then update the first child element 
    if (nextElem.children('.page').length > 0 ) {
    	nextElem.children('.page:first-child').toggleClass('active');
    } else if (nextElem.hasClass('page')) {
    	nextElem.toggleClass('active');
    }
  });
});