HTML5 div wrap clone - php

Question

How can i clone the below HTML5 wrap. The code contains also some php serialized that must be in order , example Article one has <?php echo $price[n];?> where n must be a number from 0-15.
<!-- ARTICLE START -->
<div class="col-sm-6 col-md-4">
<article class="box has-discount">
<figure>
<a class="hover-effect popup-gallery" href=
"ajax/slideshow-popup.html"><img alt="" height="161" src=
"<php echo $img[0];?>" width="270"></a> <span class=
"discount"><span class="discount-text">VIP
DISCOUNT</span></span>
</figure>
<div class="details">
<span class="price"><small>avg/night</small> $<php echo $price[0];?></span>
<h4 class="box-title"><php echo $name[0];?>small><php echo $city[0];?></small></h4>
<div class="feedback">
<div class="five-stars-container" data-original-title=
"4 stars" data-placement="bottom" data-toggle="tooltip"
title="">
<span class="five-stars" style="width: 80%;"></span>
</div><span class="review">270 reviews</span>
</div>
<p class="description">Nunc cursus libero purus ac congue arcu
cursus ut sed vitae pulvinar massa idporta nequetiam.</p>
<div class="action">
<a class="button btn-small" href=
"hotel-detailed.html">SELECT</a> <a class=
"button btn-small yellow popup-map" data-box=
"48.856614, 2.352222" href="#">VIEW ON MAP</a>
</div>
</div>
</article>
</div>
<!-- ARTICLE END -->
I have a code that generates arround 20-30 hotels,
Each hotel has his own article and his own variable as $price[], $name[], etc were the [n] value in a number in ascending order starting from 0.
How can i generate the above div x how many hotels availeble and to insert the variable value automatic ?.

Answer 1

something like this? http://jsfiddle.net/swm53ran/173/
i simplified the code a bit and did everything in jquery, but i put notes on how to do it with php (i dont have readily available access to php editor) but the concept is the same.
<div class="hotel" id="template" style="display:none;">
<div class="name"></div>
<div class="price"></div>
</div>
$(document).ready(function() {
var hotels = [
{'name': 'hotel1', 'price':'$200'},
{'name': 'hotel2', 'price':'$300'},
{'name': 'hotel3', 'price':'$700'},
{'name': 'hotel4', 'price':'$100'}
];
for(var i = 0; i < hotels.length; i++) {
var clone = $('#template').clone(true).attr('id', '');
clone.css('display', '');
clone.find('.name').html('Name: ' + hotels[i]['name'] + '. With php should be something like < ? php echo $name[i]; ? >');
clone.find('.price').html('Price: ' + hotels[i]['price'] + '. With php should be something like < ? php echo $price[i]; ? >');
clone.appendTo('body');
}
});
you'd get the hotels array from php (im assuming) and then you can put php right into the html of the clone if you take out the spaces, then use i as the incrementor from the for loop. hope this helps