Toggle Demo
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="parent-container">
<a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a>
<div class="likes"><span class="likes-count">99</span> likes</div>
</div>
<div class="parent-container">
<a href="#" class="likebutton"><i class="material-icons icon-fav">favorite_border</i></a>
<div class="likes"><span class="likes-count">74</span> likes</div>
</div>
<div class="parent-container">
<a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a>
<div class="likes"><span class="likes-count">19</span> likes</div>
</div>
CSS
.parent-container {
margin-bottom: 20px;
}
JavaScript
$(".likebutton").click(function() {
var $parent = $(this).closest(".parent-container");
var likes = parseInt($parent.find(".likes-count").text());
if($parent.find(".icon-fav").text() == "favorite") {
$parent.find(".icon-fav").text("favorite_border");
$parent.find(".likes-count").text(++likes);
}
else {
$parent.find(".icon-fav").text("favorite");
$parent.find(".likes-count").text(--likes);
}
});