Change text of Ajax post return - php

Question

I have a loop:
do {
// show items
<input type="hidden" id="contestant_id" value="'.$row_contestants['contestant_id'].'">
<input type="hidden" id="user_id" value="'.$userinfo['user_id'].'">
<button class="vote" onclick="vote()">vote</button>
<div id="result"></div>
} while ($row....);
And my function:
function vote () {
var val1 = $('#contestant_id').val();
var val2 = $('#user_id').val();
$.ajax({
url:"vote.php",
type: "POST",
data: { contestant_id: val1, user_id: val2 },
success: function(response) {
$('#result').html(response);
}
});
}
What I want to do is have the "vote" text from here:
<button class="vote" onclick="vote()">vote</button>
change to something else like "voted!" when I get the response. I sort of had it but of course it's showing here:
<div id="result"></div>
And it's only showing under the 1st result of my loop.
Any ideas?
Thanks.

Answer 1

You can pass this from html to function and handle in the script
<button class="vote" onclick="vote(this)">vote</button>
function vote (el) {
var val1 = $('#contestant_id').val();
var val2 = $('#user_id').val();
$.ajax({
url:"vote.php",
type: "POST",
data: { contestant_id: val1, user_id: val2 },
success: function(response) {
$('#result').html(response);
if (response == 'Yes') {
var text = el.text();
var values = text.split(' ');
var count = 1;
if (values.length == 2) {
count = values[1].parseInt + 1;
}
el.text('Voted ' + count);
}
}
});
}