Untitled

<script>
$(document).ready(function() {
  $('.like-button').click(function() {
    var button = $(this);
    var imageId = button.attr('data-image-id');
    var liked = button.hasClass('liked');
    var data = {
      image_id: imageId,
      liked: liked
    };
    $.ajax({
      type: "POST",
      url: "pages/gallery/likeImage.php",
      data: data,
      success: function(result) {
        if(result == "success"){
            button.toggleClass('liked');
        }
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });
  });
});





$(document).ready(function() {
  $('.unlike-button').click(function() {
    var button = $(this);
    var imageId = button.attr('data-image-id');
    var unliked = button.hasClass('unliked');
    var data = {
      image_id: imageId,
      unliked: unliked
    };
    $.ajax({
      type: "POST",
      url: "pages/gallery/unlikeImage.php",
      data: data,
      success: function(result) {
        if(result == "Unliket"){
            button.toggleClass('unliked');
        }
      },
      error: function(xhr, status, error) {
        console.log("Error: " + error);
      }
    });
  });
});


</script>


<style>
.like-icon {
  color: #d4ddde;
}

.unlike-icon {
  color: #ff0000;
}
</style>




<?php
if($have_i_liked != $myipadress) {
?>
<button class="like-button bg-transparent border-0" data-image-id="<?php echo $image_id; ?>">
<i class="fa-regular fa-heart fa-beat" style="color: #ff0000;"></i></button>
<?php
} else {
?>
<button class="unlike-button bg-transparent border-0 liked" data-image-id="<?php echo $image_id; ?>">
<i class="fa-solid fa-heart fa-beat" style="color: #ff0000;"></i></button>
<?php
}
?>