JSFiddle - React, Tailwind, and code Playground

HTML

<div id="favorite" class="favoriteNone" data="1"></div

<!--В PHP будет так:
<div id="favorite" class="favoriteNone" data="<?php echo $favorite; ?>"></div>

CSS

body {
    margin : 0;
    padding: 0;
    background-color: #23232b;
    overflow-x: hidden;
    font-family: Segoe UI, 'Open Sans', sans-serif;
}

#favorite {
    position: relative;
    font-family: "icons";
    font-size: 60px;
    height: 150px;
    width: 150px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 147px;
    cursor: pointer;
    margin: 0 auto;
    top: calc(50% - 75px);
    transition: 150ms;
}
#favorite:active {transform: scale(.94, .94)}
  
.favoriteNone{background-color: #4488d4}
.favoriteNone:hover {background-color: #3c77ba}
.favoriteNone:before  {content: "\2764"}
    
.favoriteAdded{background-color: #27a753}
.favoriteAdded:hover{background-color: #1f8e45}
.favoriteAdded:before {content: "\2713"}

JavaScript

$(document).ready(function () {
    var favorite = $("#favorite").attr("data");  // Присвоение переменной значения из data
    favoritecheck (favorite);  // Направление переменной в функцию favoritecheck
    alert("Изначально в избранном");
       
function favoritecheck () {
    if (favorite==0) {          // Функция добавляет класс объекту исходя из значения переменной
        $("#favorite").removeClass("favoriteAdded");
    }
    else {
          $("#favorite").addClass("favoriteAdded");
        };
};
    
    
$("#favorite").click(function foo(){
    if (favorite==0) {favorite = 1; alert("Добавлено в избранное")} // Изменение значения переменной при клике на объект
    else {favorite = 0; alert("Удалено из избранного")};
favoritecheck (favorite);  // Направление переменной в функцию favoritecheck
    
    //... + отправка значения favorite на сервер
});
});