JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<div id="default" data-role="page">Initial test</div>

JavaScript

var pageName = "default";

$(document).ready(function() {
    function changePage() {
        var newName = pageName == "alpha" ? "beta" : "alpha";

        $("body").append("<div id=\"" + newName + "\" data-role=\"page\"><a id=\"dynamicButton\" data-role=\"button\">" + pageName + "</a></div>");
        
        $(":mobile-pagecontainer").pagecontainer("change", "#" + newName, {
            transition: "slide"
        });
        $("#" + pageName).remove();
        pageName = newName;
    };

    changePage();
    
    $(document).on("click", "#dynamicButton", function(){
       changePage();
    });
});