JSFiddle - React, Tailwind, and code Playground

by edwardantony

HTML

<div data-role="page" id="Home" > 
                <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                    <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
                    <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                        <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                        <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                        <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                    </div>
                </div>
    
                <div data-role="content">
    
                    <ul data-role="listview" data-inset="true" id="folderData" >
                    </ul>
                     <!--   Case Information Pop up-------------------------->
                    <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
                        <div data-role="header" data-theme="b" >
    
                            <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                            <h1>Case Information</h1>
                            <a href="#" ddata-role="button" data-corners="false" id="AddButton">Add</a>
                        </div>
                      
                         <div data-role="content">
                        <div><img src="img/Documents.png"/></div>
                        <div data-role="fieldcontain">
                            <label...

JavaScript

/**
 * QUnit v1.9.0 - A JavaScript Unit Testing Framework
 *
 * http://docs.jquery.com/QUnit
 *
 * Copyright (c) 2012 John Resig, Jörn Zaefferer
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * or GPL (GPL-LICENSE.txt) licenses.
 */

$(document).ready(function() {
                       
                         $.mobile.loading('hide');
                         onDeviceReady();
                         });
                        

$(document).bind('pagecreate', function(e) {
    if (e.target.id == 'Home') {
        $("#headerButtons").on("click", "a", function() {

            if ($(this).attr("id") == "Add") {
                $('#caseNameValue').val('');
                $('#caseDate').val('');
                $('#caseTextArea').val('');
            } else if ($(this).attr("id") == "Setting") {
            } else if ($(this).attr("id") == "Edit") {
            }
        });

    }


    $(document).on('click', '.caseRowClick', function() {
        // $.mobile.changePage($("#DocumentScreen"));
        $.mobile.changePage($("#DocumentScreen"), {
            transition: "slide",
            reverse: false,
            changeHash: false
        });
        console.log(this.id)
    });


    $("#AddButton").click(function() {
        var isvalid = validationField();
        if (isvalid) {
            insertData();
            window.localStorage.setItem("isAddSomeData", "yes");
             $.mobile.changePage($("#Home"));
            /*$.mobile.changePage($("#Home"), {
                transition: "slide",
                reverse: false,
                changeHash: false
            });*/
        }
    });


    $("#Cancel").click(function() {
        $.mobile.changePage($("#Home"));
        /*$.mobile.changePage($("#Home"), {
            transition: "pop",
            reverse: false,
            changeHash: false
        });*/
    });


    $("#CancelSettingButton").click(function() {
         $.mobile.changePage($("#Home"));
       /*...