使用Node Clone重复HTML / PHP代码

I have a html & php code (article) that i need to clone it on the site. The php variables must have different id on each article.( i have $variablex[n], $variablez[n] where n = must be 1,2,3.....ñ By default i need to have 7 articles displayed on the site. And when i press the Load More button to show 2 more+ and so on. Can i do all the above things ? I mean its possible? I have created the fiddle : jsfiddle so it can be more understandable.

Forgive my lack of experience with jquery/javascript i am more a HTML/CSS.

Don't do the load two more thing. Just put them all out there.

If you must,Use document.getElementById().style.display = 'none'; (see I added an id to each article) to hide the overflow.

Put your jsfiddle code in a loop that shows all the listings

Add JS to hide the overflow (greater than 7)

If there are more than 7b listings, add a More Button to unhide (.style.display = 'block') the next two listings.

NOTE: It appears you learned you php style from WordPress. Do not do it that way. Use Heredoc syntax for your HTML echo.
Link to PHP Manual: Heredoc Syntax

<?php 
$pret1=$hotelPrices[0];
$pretdiscount = $pret1 + ($pret1 * 0.20);
$availability = $checkAvailability->searchId;
echo <<<EOT
<article class="box" data-stars="$StarRating[0]  name="$hotelName[0]" data-price="$pretdiscount">
<figure class="col-sm-5 col-md-4">
<a title="" href="https://www.bookingassist.ro/test/html/ajax/slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="160" alt="" src="$img[0][1]"></a>
</figure>
<div class="details col-sm-7 col-md-8">
<div><div>
<h4 class="box-title">$hotelName[0]<small><i class="soap-icon-departure yellow-color"></i>$hotelAddress[0], $hotelDestination[0], $Countryl</small></h4>
<div class="amenities">
<i class="soap-icon-wifi circle"></i>
<i class="soap-icon-fitnessfacility circle"></i>
<i class="soap-icon-fork circle"></i>
<i class="soap-icon-television circle"></i>
</div></div><div>
<div class="stars-$StarRating[0]-container">
<span class="stars-$StarRating[0]" style="width: 80%"></span>
</div></div></div>
<div>
<p>Pretul include cazare in camera tip $roomCattegory[0] cu masa tip $boardType[0]</p>
<div>
<span class="price"><small>pret/Sejur</small>€$pretdiscount<br/></span>
<form action="hotel-detailed.php" method="post">
<input type="hidden" name="In" value="$In" />
<input type="hidden" name="Out" value="$Out" />
<input type="hidden" name="hotel" value="$hotelCodes[0]" />
<input type="hidden" name="searchId" value="$availability" /
<input type="hidden" name="Adults" value="$Adults" />
<input type="hidden" name="Childs" value="$Childs" />
<input type="hidden" name="Offer1code" value="$hotelCodes[1]" />
<input type="hidden" name="Offer2code" value="$hotelCodes[2]" />
<input type="hidden" name="Offer3code" value="$hotelCodes[3]" />
<input type="hidden" name="Offer1pret" value="$hotelPrices[1]" />
<input type="hidden" name="Offer2pret" value="$hotelPrices[2]" />
<input type="hidden" name="Offer3pret" value="$hotelPrices[3]" />
<button type="submit"class="button btn-small full-width text-center">Detalii<small></small></button>
</form>
</div></div></div>
</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;
unset($ratesPerNight);
unset($roomsInfo);
unset($roomResponse);
?>

Change this from:

</article>
<div id="loadMore"><a class="uppercase full-width button btn-large"> mai multe rezultate</a></div>
EOT;

To:

</article>
EOT;
if ($id > 7){
echo <<<EOT
<button onclick="more()">More</button>'
<script type="text/javascript">
//<![CDATA[
var current = 7;
var max = $id;
var articles = document.getElementsByTagName("article");
for (var a = 7,a < articles.length,a++){
  articles[a].style.display = 'none';
}
function more(){
  if (current < max){current++;articles[current].style.display = 'block';
  if (current < max){current++;articles[current].style.display = 'block';
}
//]]></script>
EOT;
}

Each time the More Button is clicked two more articles will appear.