how to use each on ajax using onclick - php

Question

I am new to AJAX I've been struggling to code on ajax, but i am enjoying it. my problem is i have a looping data where in each has a vote link functionality. I was able to do the ajax function but once i click on each data it give me one value only which is the first value i am getting from the database. Here's my code:
<span id="question">Vote for your Recipe!</span>
<?php $getData = $recipes->getBreakfast(); foreach($getData as $data) { ?>
<div class="item"><?php echo $data['recipe_id'] ?> </div>
<div class="score"><?php echo $data['vote']; ?></div>
<div class="a">Vote<?php echo $data['recipe_title']; ?></div>
my ajax:
$(document).ready(function() {
var self = $(this);
//var id = $(".item").html();
var score = $(".score").html();
$.ajaxSetup({
url: 'insert_vote.php',
type: 'POST',
cache: 'false',
});
$(".a").click(function() {
alert(score);
//self.find('.score').html(++score);
return false;
});
});
Vote for your Recipe!
6
Vote CHICKEN
0
Vote ADOBO
4
Vote HOTDOG
I am only getting the 6 score value even if i click on the other recipe

Answer 1

remove
var score = $(".score").html();
and use
$(".a").each(function() {
$(this).click(function() {
var score = $(this).prev().html();
alert(score);
return false;
});
});