Is there a way to increment the count of a fa-heart value on click and decrement it on the second click?
The issue I'm facing is that I have multiple fa-heart elements on the same page, making it challenging to increment or decrement the clicked fa-heart appropriately.
You can find my fiddle below:
https://jsfiddle.net/mehbub/d9e2qotg/1/
### Code Snippet:(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
*(jQuery code for incrementing/decrementing likes)*
$count.text(function(idx, txt) {
*(convert text to number and increment by one)*
return +txt + 1;
});
#heart {
color: grey;
font-size: 20px;
}
#heart.red {
color: red;
}
*(HTML structure for fa-hearts with names and like counts)*
I am looking for a solution where each fa-heart can be individually clicked to either change its color to red (increment) or grey (decrement).
Thank you!