JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<!-- START OF FIRST PAGE / MAIN MENU -->
<div data-role="page" id="menu">
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->
    
    <!-- Begin Content page zero menu-->
    <div data-role="content">       
        <div id="displayplainmsg"></div>
         <input type="button" id="start" value="Start Load" />
         <input type="button" id="finish" value="Finish Load" />
    </div>
    <!-- /content -->
        
    <div data-role="footer" data-position="fixed" >
      <h4>Page Footer1 Main Menu Page</h4>
        <div data-role="navbar">
              <ul>
                 <li><a href="#mypageone">Goto PageOne</a></li>
              </ul>
         </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<!-- END OF PAGE ZERO / MAIN MENU -->

<!-- START OF PAGE ONE -  -->
<div data-role="page" id="mypageone">
    <div data-role="header">
    <h1>Page One</h1>
    </div><!-- /header -->
    
    <!-- Begin Content page one -->
    <div data-role="content" id="paymentscheduledisplay">    
    </div>
    <!-- /content -->
    
    <div data-role="footer" data-position="fixed" >
      <h4>Page Footer2  page one <h4>
        <div data-role="navbar">
             <ul>
                <li><a href="#menu">Goto MainMenu</a></li>
             </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<!-- END OF PAGE ONE -->

JavaScript

$('#mypageone').live('pagebeforecreate', function (event, ui) { 
  //alert('Just selected page one!');
    //HEY!!! the page load never pops up :-(
  $.mobile.loadingMessage = "this msg set on live pageshow from mypageone..."; 
  //$.mobile.pageLoading();
  $.mobile.showPageLoadingMsg();
  calcLongList();
  //$.mobile.hidePageLoadingMsg();
});

function calcLongList() {
var numberCount = parseInt("1000"); //used on the listing
var myDisplay2 = ""; //null out the display
//
  while (numberCount > 0) {
    myDisplay2 = myDisplay2 + numberCount;
    document.getElementById("paymentscheduledisplay").innerHTML += myDisplay2 + "<br>";
    numberCount = numberCount - 1;
  } //end while loop
}


$('#menu').live('pagebeforeshow',function(event, ui){
  //alert('Just selected main menu page!');
  var myDisplay3 = "this text populated from .live pagebeforeshow event";
document.getElementById("displayplainmsg").innerHTML = myDisplay3;
});

$(document).ready(function() {
    $.mobile.loadingMessage = "the load msg works, but just not when a page is loaded on a live pagecreate...";

    $('#start').click(function() {
        $.mobile.pageLoading();
        $.mobile.showPageLoadingMsg();
    });
    $('#finish').click(function() {
        $.mobile.pageLoading(true);
        $.mobile.hidePageLoadingMsg();
    });
});