Running a small ecommerce shop, I have designed product cards using HTML, CSS, and a bit of Jquery for animations. However, a problem arises when clicking the "add to cart" button on any product card as it adds all items to the cart and triggers animations for each one simultaneously. This issue seems to stem from all product cards sharing the same classes/ids, causing the Jquery script to apply the animation to all cards. Is there a way to modify the script to run the animation only once for each product card? Here is the code:
HTML:
<div class="itemwrapper">
<div class="productcontainer">
<div class="cardtop" style="
background: url(images/collar-1.jpeg) no-repeat center center; background-size: contain;"></div>
<div class="cardbottom">
<div class="cardleft">
<div class="carddetails">
<h1>Multifunction Collar</h1>
<p>$21.99</p>
</div>
<div class="cardbuy"><img class="addtocart" src="images/cart-icon.png" width="85px" height="85px" /></div>
</div>
<div class="cardright">
<div class="carddone"><img src="images/done.png" width="85px" height="85px" /></div>
<div class="details">
<h1>Multifunction Collar</h1>
<p>Added to your cart</p>
</div>
<div class="cardremove"><img src="images/remove-icon.png" width="85px" height="85px" /></div>
</div>
</div>
</div>
<div class="cardinside">
<div class="cardicon"><img src="images/info.png" width="30px" height="30px" /> </div>
<div class="cardcontents">
<table class="cardtable">
<tr>
<th>Details: </th>
<th></th>
</tr>
<tr>
<td colspan="2" style="font-size: 15px">Multifunction collar with different hooks for tags and leash <br />This collar comes with fine high quality soft interior padding which is made exclusively from goat leather.</td>
</tr>
<tr>
<th>Quantity: </th>
<th></th>
</tr>
<tr>
<td><input type="number" id="quantity" name="quantity" min="1" max="5" value="1"></td>
</tr>
</table>
</div>
</div>
</div>
JS:
$('.cardbuy').click(function(){
$('.cardbottom').addClass("clicked");
});
$('.cardremove').click(function(){
$('.cardbottom').removeClass("clicked");
});
CSS:
.itemwrapper {
all: revert;
width: 300px;
height: 500px;
background: white;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 10px 10px 10px 10px;
box-shadow: 0;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
}
.itemwrapper:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.itemwrapper .productcontainer {
width: 100%;
height: 100%;
}
... (CSS code goes on)