I have created wishlist HTML which contains an image, product name, price & add & delete button. I want to show all the wishlist on my HTML page.
<section class="wishlist">
<div class="container">
<h2 class="mb-5">My wishlist</h2>
<div class="row wishlistRow py-3 px-3 mb-4">
<div class="col-md-2 pl-0 mb-3">
<img src="img/wish01.jpg" class="w-100" alt="">
</div>
<div class="col-md-10">
<h5>Product Name</h5>
<div class="row">
<div class="col-md-6">
<span class="rupeeIcon"><i class="fas fa-rupee-sign"></i> 499</span>
<span class="oldPrice ml-3"><del>
<i class="fas fa-rupee-sign"></i> 599</del>
</span>
</div>
<div class="col-md-6 deleteBtn">
<button class="btn " tabindex="0"><i class="far fa-trash-alt"></i></button>
</div>
</div>
<div class="row justify-content-md-end mb-md-4">
<a href="cart.html" class="redBtn btn productBtns mb-2"><i class="fas fa-shopping-cart"></i> Add to cart</a>
</div>
<div class="row">
<p class="rating"><i class="fas fa-star"></i> (4.5) <a href="#">167 Reviews</a></p>
</div>
</div>
</div>
<div class="row wishlistRow py-3 px-3 mb-4">
<div class="col-md-2 pl-0 mb-3">
<img src="img/wish01.jpg" class="w-100" alt="">
</div>
<div class="col-md-10">
<h5>Product Name</h5>
<div class="row">
<div class="col-md-6">
<span class="rupeeIcon"><i class="fas fa-rupee-sign"></i> 499</span>
<span class="oldPrice ml-3"><del>
<i class="fas fa-rupee-sign"></i> 599</del>
</span>
</div>
<div class="col-md-6 deleteBtn">
<button class="btn " tabindex="0"><i class="far fa-trash-alt"></i></button>
</div>
</div>
<div class="row justify-content-md-end mb-md-4">
<a href="cart.html" class="redBtn btn productBtns mb-2"><i class="fas fa-shopping-cart"></i> Add to cart</a>
</div>
<div class="row">
<p class="rating"><i class="fas fa-star"></i> (4.5) <a href="#">167 Reviews</a></p>
</div>
</div>
</div>
</div>
</section>