Add +1 or -1 on value when clicking on a icon - php

Question

I'm looking for a way to automatically add +1 to the number when a user clicks the icon or -1 if the user clicks again. My code adds already in the back a +1 or -1, so that event is already covered. But I want that only the number right from that particular icon is being added. The problem is that I have 32 icons on that same page, so the code should only do an action on the number in that span on not all span's and without refreshing the page every time a user clicks on an icon.
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
This is the jQuery code for toggling the icon.
$('.favorite').click(function(e) {
e.preventDefault();
vote(this);
$("i", this).toggleClass("far fa-heart fas fa-heart");
});
This is the vote function
function vote(_obj) {
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php"
});
}

Answer 1

You can try below example (ignore my html because I used font awesome 4)
$('.favorite').each(function(e) {
let clicked = false;
$(this).click(function(e) {
e.preventDefault();
let text = +$(this).children('.count').text();
//vote(this); // exclude to avoid error
$(this).children('i').toggleClass('fa-heart-o');
if (!clicked) {
$(this).children('.count').addClass('plus').text(parseInt(0 + 1))
clicked = true;
} else {
$(this).children('.count').removeClass('plus').text(parseInt(0 - 1))
clicked = false;
}
});
});
a {
text-decoration: none
}
span.count.plus::before {
content: "+";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<div>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>