JSFiddle - React, Tailwind, and code Playground

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: 20px;">My Cases</h1>

        <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal"> <a href="#UserSettingScreen" data-transition="none" 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-transition="none" 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="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup" id="Edit" data-position-to="window">Edit</a>

        </div>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" id="folderData"></ul>
        <!-- **************Case Information Pop up Start*******************-->
        <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" 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="#" data-role="button" data-corners="false" id="caseInformationAddButton">Add</a>

            </div>
            <div data-role="content">
                <div>
                    <img src="img/Documents.png" />
                </div> <span class="fright custom-label">*<span class="test">Mandatory Fields</span></span>
                <div style="clear:both;"></div>
                <div data-role="fieldcontain">
                    <label for="text-12" class="name_label_field">Case Name<span class="custom-label">*</span> :</label><span class="mandatory_label fright...

CSS

#Home {
    background: url("http://images1.wikia.nocookie.net/__cb20090704061234/harrypotter/images/6/61/Harry-Potter-the-Order-Phoenix-832.jpg") !important;
    background-attachment:fixed;
    background-size:cover;
}

JavaScript

var db = "";
//will create database Dummy_DB or open it

//function will be called when device ready
function onDeviceReady() {

    connectionStatus = navigator.onLine ? 'online' : 'offline';
        if(connectionStatus=="offline"){
            alert(" Network not found ! ");
        }

    
    db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
 //db.delete("DROP TABLE CaseTable", null, null);
    if (window.localStorage.getItem("isAddSomeData") == "yes") {
      
        db.transaction(getallTableData, errorCB);


    }    
}
$(document).ready(function() {

           // $.mobile.loading('hide');
 //$.noConflict();
 onDeviceReady();
 });
$(document).on('click', '#caseInformationAddButton', function() {
     isvalid = true;
     isUpdaterequired=false;
    if (isvalid) {
     
        if(isUpdaterequired){
          // $("#caseInformationAddButton").text('Add');
          $(".caseName_h").attr("readonly", false);
          updatedata();

        }else{
          if( window.localStorage.getItem("isAddSomeData")=='yes'){
          
        }
         CASENAME=$('.caseName_h').val();
          

        
                insertData();
           
        }
        
        window.localStorage.setItem("isAddSomeData", "yes");
        $.mobile.changePage($("#Home"),{transition:'none'});
       
    }
});
   


/*
Case pad Dat base
*/




function insertData() {
      

    db.transaction(createTable, errorCB, afterSuccessTableCreation);
}

//create table and insert some record
function createTable(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName  VARCHAR(100) unique NOT NULL ,CaseDate INTEGER ,TextArea VARCHAR(200) NOT NULL)');
  

  tx.executeSql('INSERT OR IGNORE INTO CaseTable(CaseName,CaseDate,TextArea) VALUES(?,?,?)',
              [$('.caseName_h').val(),
              $('.caseDate_h').val(),
              $('.caseTextArea_h').val() ]);
   

}
//function will be called when an error...