Unable to change button UI on AJAX getJSON .done - ajax

Question

After creating add post to favorite and posted at codereview i had to improve my code as bellow,
And after changing code the button UI doesn't change when clicked
post_page.php
<?php
$email = 'user#mail.com';
// Query to get the user_id
$stmt = $conn->prepare('SELECT memberID FROM members WHERE email = :email AND active="Yes" ');
$stmt->execute(array(':email' => $email));
$row = $stmt->fetch();
$mbid = $row['memberID'];
$pid = '4';
// Query to Get the Director ID
$stmt = $conn->prepare('SELECT * FROM allpostdata WHERE id =:id');
$stmt->execute(array(':id' => $pid));
$result = $stmt->fetchAll();
foreach ($result as $row) {
echo "<p>Director: " . $row['tit'] . "</p> ";
$fav_image = checkFavorite($mbid, $pid, $conn);
echo "Favorite? : " . $fav_image . "";
}
function checkFavorite($mbid, $pid, $conn) {
$stmt = $conn->prepare("SELECT * FROM favorite WHERE memberID=:mid AND id=:id");
$stmt->execute(array(':mid' => $mbid, ':id' => $pid));
$count = $stmt->rowCount();
if ($count == 0) {
echo "<div class='button btn btn-block btn-outline-danger' method='Like' data-user=" . $mbid . " data-post=" . $pid . "> Add<i class='mi mi_sml ml-2' id=" . $pid . ">favorite_border</i></div>";
} else {
echo "<div class='button btn btn-block btn-outline-danger' method='Unlike' data-user=" . $mbid . " data-post=" . $pid . ">Remove<i class='mi mi_sml ml-2' id=" . $pid . ">favorite</i></div>";
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.button').click(function (e) {
e.preventDefault();
$.getJSON('favs.php',
{user_id: $(this).attr('data-user'),
director_id: $(this).attr('data-post'),
method: $(this).attr('method')})
.done(function (json) {
switch (json.feedback) {
case 'Like' :
$(this).attr('method', 'Unlike');
$(this).html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
break;
case 'Unlike' :
$(this).html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
$(this).attr('method', 'Like');
break;
case 'Fail' :
alert('The Favorite setting could not be changed.');
break;
}
})
.fail(function (jqXHR, textStatus, error) {
alert("Error Changing Favorite: " + error);
});
});
});
</script>
favs.php
<?php
include("$_SERVER[DOCUMENT_ROOT]/include/config.php");
include("$_SERVER[DOCUMENT_ROOT]/classes/function.php");
$method = clean_input($_GET['method']);
$user_id = clean_input($_GET['user_id']);
$director_id = clean_input($_GET['director_id']);
switch ($method) {
case "Like" :
$query = 'INSERT INTO favorite (memberID, id) VALUES (:mID, :pID)';
break;
case "Unlike" :
$query = 'DELETE FROM favorite WHERE memberID=:mID and id=:pID';
break;
}
$feedback = 'Fail'; // start with pessimistic feedback
if (isset($query)) {
$stmt = $conn->prepare($query);
$stmt->bindParam(':mID', $user_id, PDO::PARAM_INT, 12);
$stmt->bindParam(':pID', $director_id, PDO::PARAM_INT, 12);
if ($stmt->execute()) {
$feedback = $method;
} // feedback becomes method on success
}
echo json_encode(['id' => $director_id,
'feedback' => $feedback]);
?>
My problem is when button is clicked and when ajax return success the button should change its UI.
where else in my case its not changing when on page load it show Add even after clicking on button and ajax return success still it is same.

Answer 1

The problem with your code is $(this) i.e: In ajax success function jquery is not able to find which element is clicked and where to apply required changes. To solve this you can store $(this) in some variable and use the same. Like below :
$('.button').click(function(e) {
//getting current element which is clicked
var button = $(this);
e.preventDefault();
$.getJSON('favs.php', {
user_id: $(this).attr('data-user'),
director_id: $(this).attr('data-post'),
method: $(this).attr('method')
})
.done(function(json) {
switch (json.feedback) {
case 'Like':
button.attr('method', 'Unlike');
button.html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
break;
case 'Unlike':
button.html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
button.attr('method', 'Like');
break;
case 'Fail':
alert('The Favorite setting could not be changed.');
break;
}
})
.fail(function(jqXHR, textStatus, error) {
alert("Error Changing Favorite: " + error);
});
});