JSFiddle - React, Tailwind, and code Playground

by pkeller3

HTML

<div id="fullPage" data-role="page">
    <div id="valueListButtons" class="listButtons">
        <input id="addBtn" type="button" value="Add" data-mini="true" data-role="controlgroup" data-type="horizontal"> <a href="#" />
        <input id="editBtn" type="button" value="Edit" data-mini="true" />
        <input id="deleteBtn" type="button" value="Delete" data-mini="true" />
    </div>
</div>
<div id="addPage" data-role="page" data-dialog="true" >
    <div data-role="header">
         <h1>Add Value</h1>

    </div>
    <div data-role="main" class="ui-content">
        <input id="addValue" type="text" />
        <input id="cancelAddBtn" type="button" value="Cancel" />
        <input id="saveBtn" type="button" value="Save" />
    </div>
</div>

JavaScript

$(document).ready(function () {
    $("#addBtn").on("click", "a", function () {
        debugger;
        $("#addValue").val("");
        
        $.mobile.changePage($("#addPage"), {
              transition: 'pop',
              role: 'dialog'
          });
        window.location.hash = "#addPage";

        $("#addPage").on("pagecreate", function (event, ui) {
            $("#saveBtn").parent().addClass("dialogBtn");
            $("#cancelAddBtn").parent().addClass("dialogBtn");
        });
    });
});