JSFiddle - React, Tailwind, and code Playground

HTML

<!-- The Color Theme for the only page is Black (i.e., a)  -->
<div data-role="page" id="page-1" data-theme="a">

    <!-- Page DIV Container 1 ( Header and NAV )-->
    <div data-role="header" id="header-1">
      <div data-role="navbar" id="navbar-1">
        <ul>
            <li>
              <a id="button1of5-A" href="#button1of5-original" title="North" style="display:visible">Weather</a>
              <a id="button1of5-B" href="#button1of5-changed"  title="South" style="display:none" >WEATHER</a>
            </li>
          <li>
              <a id="button2of5-A" href="#button2of5-original" title="HOT"   style="display:visible">Stocks</a>
              <a id="button2of5-B" href="#button2of5-changed"  title="PENNY" style="display:none" data-theme="e" onclick="alert('STOCKS in NAV Bar was auto-clicked');">STOCKS</a>
            </li>
        </ul>
      </div>
    </div>

    <!-- Page DIV Container 2 ( Content ) -->
    <div data-role="content">

      <div class="textStyle-1">
      <br /><br /><br />
        <h2>Toggle NAV Bar Buttons</h2><br/>
            All changes occur on this page. No 2nd Page.<br />
            NAV's Mouseover Title, Label, Href, Color, and Status are changed.<br />
          All changes shown are to illustrate process, update 'B' anchor's as required.<br/>
            View browser status-bar to confirm Href changes.<br />
        <br /><br /><br />
      </div>

      <a data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" id="original" href="#" onclick="next(); return false;" style="display:visible">Next Pseudo Page</a>

      <a data-role="button" data-transition="fade" data-icon="arrow-l" data-iconpos="left" id="toggle" href="#" onclick="previous(); return false;" style="display:none">Previous Pseudo Page</a>
          
    </div>

  </div>

CSS

.textStyle-1 {
    font-size: 18px;
    color: white;
    text-align: center;
}

JavaScript

function next(){

    // The Arrow Button will change on this page.
    $('#original').css('display','none');
    $('#toggle').css('display','block');
    
    // For button 1, the first anchor is hidden and the second anchor is shown thus changing the button on the same page.
    $('#button1of5-A').hide();
    $('#button1of5-B').show();

    // Just like above but for the second button.
    $('#button2of5-A').hide();
    $('#button2of5-B').show();    
    
    // Optional: This will RESET all NAV Buttons to non-active state if previously set active.
    $('#navbar-1 ul li a').each(function() {
       $(this).removeClass('ui-btn-active');
    });    
   
    // When data-theme is NOT in HTML: This will CHANGE the button color to yellow and set hover state. The order shown is important.
    //$('#button2of5-B').addClass('ui-btn-hover-e').attr('data-theme','e');
    
    // This will send a Click Event to the button. Note the HTML markup is using onclick for an alert message.
    $('#button2of5-B').click();
    
}


function previous(){

    // This function is the opposite of the above.

    $('#original').css('display','block');
    $('#toggle').css('display','none');
        
    $('#button1of5-A').show();
    $('#button1of5-B').hide();

    $('#button2of5-A').show();
    $('#button2of5-B').hide();

    $('#navbar-1 ul li a').each(function() {
       $(this).removeClass('ui-btn-active');
    });     
    
}