how to properly use the like system twitter style button - php

Question

i created a like system where user can like a post of another user.. the data was inserted to my db. my only problem was i dont have any idea on how to stay the like button if the user like the post.. cause what happen is when the user like the post and refresh the page the button also refresh/back to unlike
this is what it looks like the default icon of my button is gray. when user hover the button it runs the animation and when the user hit like it should turn to red. but since when the user hit the like button i run the reload page the button returns to gray.. i think im missing something but i dont have any idea how to do it.....
CSS
.coracao{
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
height: 50px;
width: 50px;
background-size: 2900%;
background-position: left center;
top: -30px;
left: 0px;
position:absolute;
}
.coracao.ativo{
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png");
height: 50px;
width: 50px;
background-size: 2900%;
background-position: right center;
top: -30px;
left: 0px;
position:absolute;
animation: none 0s !important;
-moz-animation: none 0s !important;
}
.btn:hover .coracao{
animation: animationFrames 1.4s steps(28) infinite;
}
#keyframes animationFrames{
100%{
background-position: -2800px ;
}
}
i think i need to make some condition here i just dont have any idea on what to do...
this is the button
<div class="btn like">
<div class="boxcoracao">
<span class="coracao" name="like"><br>   Love</span>
</div>
</div>   
this where i insert the data of the user and the post id
<script>
$(".like").click(function(){
if ($('.boxcoracao .coracao',this).toggleClass("ativo")){
togglePost("like"); // run function
} else {
// update the text to show what the next click would be
togglePost("dislike"); // run function
}
function togglePost(action){
$.ajax({
type: "post",
url: "",
data: "",
success: function(data){
window.location.reload();
},
error: function(e){
alert("please try again...");
}
});
}
});
</script>

Answer 1

When you query for all of the posts, you need to also pull the 'like' state of the post by doing a join on the active user's likes, and then setting the content of the like button based on that flag.
I'm your example, there is no PHP to process the page when it is loaded. What you are asking for is functionality that is only possible by using a server side script that processes the output of the page based on the contents of a database.
Research PHP web applications. This is not achievable with pure JS, HTML, and CSS.