JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset id="data-page">
    <legend>data-page</legend>
    <button rel="page1">Highlight page one</button>
    <button rel="page2">Highlight page two</button>
    <div data-page="page1">
        <h1 id="page1">Page one</h1>
        <h1 id="page2">Page two</h1>
    </div>
</fieldset>

<fieldset id="class">
    <legend>class</legend>
    <button rel="page3">Highlight page three</button>
    <button rel="page4">Highlight page four</button>
    <div class="page3">
        <h1 id="page3">Page three</h1>
        <h1 id="page4">Page four</h1>
    </div>
</fieldset>

CSS

fieldset { border: 1px solid #aaa; padding: 5px; }

h1 { background-color: white; }
div[data-page="page1"] h1#page1 { background-color: pink; }
div[data-page="page2"] h1#page2 { background-color: pink; }
div.page3 h1#page3 { background-color: cyan; }
div.page4 h1#page4 { background-color: cyan; }

JavaScript

$('#data-page button').click(function(){
    var rel = $(this).attr('rel');
    $(this).siblings("div").attr('data-page', rel);
});

$('#class button').click(function(){
    var rel = $(this).attr('rel');
    $(this).siblings("div").attr('class', rel);
});