JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<div data-role="page" id="DocumentScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
                <div class="ui-btn-right"  data-role="controlgroup" data-type="horizontal">
                    <div><a  data-role="button">AddORDelete</a></div>

                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderInside_Data" >
                </ul>

            </div>


        </div>

JavaScript

for (i = 0; i < 40; i++) {
                        $('#folderInside_Data').append(
                                '<li  data-icon="edit" data-icon="delete" class="rowID"  id="' + i + '">' + 
								'<a href="#">' + '<img src="img/Blue-Folder.png">'
								+ '<button class="ui-btn-right" >Edit</button>'
								+ '<button class="ui-btn-right" >Delete</button>'+
								'<h2>Broken Bells</h2>' + '<p>Broken Bells</p>'
								+ '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                                );
                 $('#folderInside_Data').listview('refresh');
                }


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