I am attempting to create a simple functionality for liking and adding items to a cart by clicking on the icons, which should immediately change the icon's color when clicked. However, I am facing an issue where the parent div's link is also being triggered, so I added a stopPropagation to the script. I have not yet added the code for #addtocart in html & script as it will be similar to the #heart like icon function.
The problem I am encountering is that the toggle is not working properly, and my editor is showing an "Error: $undefined" message even though I have linked my javascript correctly. If someone could help me identify where I went wrong, I would greatly appreciate it. In the future, I plan to implement the functionality where clicking on these icons will add the product to the user's wishlist or cart page, but since I haven't learned backend coding yet, I am focusing on rendering the UI for now. It would be great if you could provide guidance on how to make the icons link directly to the user's wishlist or cart page without inheriting the parent's link.
$(document).ready(function() {
$('#heart').click(function() {
$('#heart--liked').toggle('1000');
});
$("#heart a").click(function(e) {
//do something to stop link # from loading
e.stopPropagation();
});
});