How to add more than one information into JQuery Mobile List view

Question

I am getting JSON data (list of Hotels available with in given distance). I am getting following information in JSON format, Name of Hotels, Distance of Hotel from our current location, number of rooms. There may be more than one Hotels in the given distance. We have to print all these information in ListView like below. I want to combining the all informations like in following figure of a Hotel into a single listview.

When we click any list of hotel, It will redirect to Hotel site or More details dedicate Hotel page.

Javascript code is.

    <script> 
            $(document).ready(function(){ 
                $("#btnReg").click(function(){ 
                    $("#listOfHotelOption").empty();
                    var distance = document.getElementById('distance_id').value; 
                    var output=""; 
                    $.ajax({ 
                            url:"http://192.168.1.4/Experiements/webservices/getBuddy.php", 
                            type:"GET", 
                            dataType:"json", 
                            data:{type:"login", Distance:distance}, 
                            ContentType:"application/json", 
                            success: function(response){ 
                            console.log(response) 
                                $.each(response, function(index,value){ 

                                 output+="<li>"+value.Hotel.Name+" "+value.Hotel.Distance+" " +value.Hotel.Rooms+"</li>";
                                }); 
                            $("#listOfHotelOptions").append(output).listview().listview('refresh'); 
                        }, 
                            error: function(err){ 
                            alert(JSON.stringify(err)); 
                        } 
                    }) //ajax 
                }); //click 
            }); //ready 
    </script>

**My server site code is** 

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("hotels");
if(isset($_GET['type']))
{
    if($_GET['type']=="login"){
        $distanceInKM=$_GET['Distance'];       
        $query="Select * from Hotels where Distance<='$distanceInKM'";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('Hotel'=>$recipe);
            }
            $output=json_encode(($recipes));
            echo $output;
        }
    }
}
else{
    echo "Invalid format";
}

Answer 1

I prepared a demo with grabbing data from the list items and close to the format you want to achieve

Demo

http://jsfiddle.net/0m3pxznf/

Jquery to grab data from the list items you use <li data-whatever="abcdcd" ... etc and grab them upon click.

$(document).on("click", "#hotels >li", function () {
var hotelname = $(this).closest("li").attr('data-hotel');
var rooms = $(this).closest("li").attr('data-rooms');
alert(hotelname + "--" + rooms)
})

Html

<li data-hotel="taj" data-rooms="10"><a>
    <img src="http://s30.postimg.org/9evb4kq65/album_bb.jpg">
        <h2>Hotel:<span class="hotel">Taj</span><span class="avail">Available Rooms:<span class="rooms">10</span></h2>
        <p>Distance:<span class="distance">10km</span></p> <img src="http://s21.postimg.org/3qio5rxeb/album_p.jpg" class="sideimg"></a>

</li>

Css

.sideimg{
 position: absolute;
right:0 !important;
top: 0 !important;
max-height: 5em !important;
max-width: 5em !important;
}

 .ui-listview>li h2 {
margin-top: -5px !important;
}
.ui-listview>li p {
margin-top:10px !important;
}

.hotel, .rooms { padding-left: 5px; }


.avail { padding-left: 15px; }

Result

If you want to redirect users to the hotel sites then put in the list items data-url="the-url" and grab it in the click function and use window.location.href = theurlvariable;