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: 100px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" 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 for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input...

JavaScript

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

//document.addEventListener("deviceready", onDeviceReady, false);
    var db = "";
     //will create database Dummy_DB or open it
 
    //function will be called when device ready
    function onDeviceReady(){
         db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
         db.transaction(queryDB,errorCB);
       
       //   db.transaction(populateDB, errorCB, successCB);
    }
    function insertData(){
    db.transaction(populateDB, errorCB, successCB);
    }
   
    //create table and insert some record
    function populateDB(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
        tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("'+$('#caseNameValue').val()+'", "'+$('#caseDate').val()+'","'+$('#caseTextArea').val()+'")');
    }
 
    //function will be called when an error occurred
    function errorCB(err) {
        alert("Error processing SQL: "+err.code);
    }
 
    //function will be called when process succeed
    function successCB() {
        alert("success!");
        db.transaction(queryDB,errorCB);
    }
 
    //select all from SoccerPlayer
    function queryDB(tx){
        tx.executeSql('SELECT * FROM CaseTable',[],querySuccess,errorCB);
    }
 
    function querySuccess(tx,result){
     var len = result.rows.length;
     
      for (var i=0; i<len; i++){
              $('#folderData').append(
               '<li class="row" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>'+result.rows.item(i).CaseName+'</h2>' + '<p>'+result.rows.item(i).CaseDate+'</p>' + '<p>'+result.rows.item(i).TextArea+'</p>'+'<span class="ui-li-count">'+ i+'</span></a>' + '</li>'
            );
        } 
       ...