JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>Hotel List</h1> 
    </div> 	
    <div role="main" class="ui-content">

        <button id="btnReg">Get Hotels</button>
        <ul data-role="listview" id="listHotelsOption" data-inset="true"></ul>

    </div>   
</div>  

<div data-role="page" id="page2">
     <div data-role="header">
        <h1>Hotel Details</h1> 
    </div> 	
    <div role="main" class="ui-content">

        <p id="hotelDetails"></p>
        
        <a href="#page1" class="ui-btn">Back to list</a>

    </div>    
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
    
    $("#listHotelsOption").on("click", "li", function(){
        //get hotel id
        var id = $(this).jqmData("hotelid");
        
        $("#hotelDetails").text("Details for hotel with ID = " + id);
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page2", { transition : "slide" });

    });
    
    $("#btnReg").on("click", function(){      
        var output = '';
        for (var i=0; i<5; i++){                                                                 
            output+='<li data-hotelid="'+i+'"><a href="#" style="text-decoration:none;"> <img alt="chef" src="http://lorempixel.com/20/20/food/1/" width="20px" height="20px" >Hotel'+ i +' has'+ i +' rooms</a></li>';
        }
        $("#listHotelsOption").append(output).listview('refresh'); 
    }); 

});