<?php if(isset($_POST["btn-add"])):?>
<?php $element = 0; ?>
<?php while($element < 10): ?>
<?php $statement = $pdo->query("SELECT * FROM dorayaki ORDER BY stock DESC LIMIT $element ,1"); ?>
<?php if($row = $statement->fetch()): ?>
<div name ="card" class = "card">
<?php $doraId = $row["id"] ; ?>
<p><?php print_r("Name: "."<a name='doraprice' href='detail.php?id=$doraId'>".$row["name"]."</a>"); ?></p>
<p><?php print_r("Price: "."<a name='doraprice' href='detail.php?id=$doraId'>".$row["price"]."</a>"); ?></p>
<p><?php print_r("Description: "."<a name='doraprice' href='detail.php?id=$doraId'>".$row["desc"]."</a>"); ?></p>
</div>
<?php $element++; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<form method="post">
<input type="submit" name="btn-add" value="Add element">
</form>
Every time "Add element" is clicked, I want it to append one 'card' to the html page and if the button is clicked again, it will add one more 'card' until it reaches 10 cards. Instead of appending it one by one, when I clicked the "Add Button", it appends all the cards to the html page in once. How to solve this?