I want to change or replace complete html tag not just inner it :
function addToLikes(image_id) {
$.ajax({
url: 'functions/addToLikes.php',
method: 'POST',
data: {
image_id: image_id
},
success: function(data) {
document.getElementById(image_id).innerHTML = `<i class="bi bi-heart-fill ms-3" onclick="removeFromLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>`;
}
});
}
HTML
<i class="bi bi-heart ms-3" id="<?php echo $row['image_id'] ?>" onclick="addToLikes('<?php echo $row['image_id'] ?>')" style="cursor:pointer"></i>
This is a better way - much faster and does not make the DOM flicker
$(".bi").on("click", function(e) {
const $this = $(this)
const liked = $this.hasClass("bi-heart-fill");
$.post("functions/toggleLikes.php', { id: $this.data("id"), liked:liked },function() {
liked = !liked;
$this.toggleClass("bi-heart-fill",liked)
$this.toggleClass("bi-heart",!liked)
})
})
<i class="bi bi-heart<?= $liked?"fill":"" ?> ms-3" data-id="<?php echo $row['image_id'] ?>" style="cursor:pointer"></i>
</div>