JSFiddle - React, Tailwind, and code Playground

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>

CSS

.ctrl
{
text-align:right
}

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="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/album-bb.jpg"><h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '<span class="ctrl"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" ><button>Edit</button><button>Delete</button></fieldset><span></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)
               });