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="addbuttons" data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting">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" data-transition="pop" data-overlay-theme="a">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="here_table"></ul>
        <div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
            <div data-role="header" data-theme="b"> <a href="#" data-role="button" data-corners="true" id="Cancel" data-rel="back">Cancel</a>

                 <h1>Case Information</h1>
 <a href="#" ddata-role="button" data-corners="true" data-icon="plus">Add</a>

            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                    <input name="text-12" id="text-12" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                    <input name="text-12" id="text-12" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="textarea-12">Textarea:</label>
                    <textarea cols="40" rows="8"...

CSS

.ui-page {
    background: url(http://t3.gstatic.com/images?q=tbn:ANd9GcTza8rTq5bK16rNXCXFVbM6DJRdK5zJg1R3B9_iP0bvOLwV1qcuAQ) no-repeat fixed left bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: cover;
}

JavaScript

for (i = 0; i < 40; i++) {
    $('#here_table').append('<li class="row" id="' + i + '"><a href="#">' + i + '</a></li>');

}
$(".row").click(function () {
    alert(this.id);
    console.log(this.id)
});