JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

<div data-role="content" id="links">

</div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
        
</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1>
        </div>

        <div id="pagecontent" data-role="content">

        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>

JavaScript

$(document).ready(function() {
    
  
    

  
 for (var i = 0; i < 4; i++) {  

    var button= '<a data-role="button" href="#secondpage" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Link Button</span></span></a>';
     
    $('#links').append(button);
     
       $("#secondpage").attr("val", "test value"+i);
 }
    
    $('#secondpage').live('pageshow', function(){
        var val1= $(this).attr('val');
        $("#pagecontent").html(val1);
        console.log('val is '+val1);
});

});