JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

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

.positionCorner {
    position: absolute;
    bottom:0;
    right:0;
    display: none;
}

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 positionCorner" style="right:55px;" >Edit</button>' + '<button class="ui-btn-right positionCorner" >Delete</button>' +
                       '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>');
                   $('#folderInside_Data').listview('refresh');
               }


               $('.ui-btn-text').click(function () {
                   $('.positionCorner').show();
                   // $.mobile.changePage($("#realTimeScreen"));
                   $.mobile.changePage($("#realTimeScreen"), {
                       transition: "slide",
                       reverse: false,
                       changeHash: false
                   });
                   console.log(this.id)
               });