[Hot] Love React Style লাইক বাটন Code All website use Don’t Miss

PHP::::-

Like and unlike system

<span class="unlike fa fa-thumbs-up" data-id="”>
<span class="like hide fa fa-thumbs-o-up" data-id="”>

<span class="like fa fa-thumbs-o-up" data-id="”>
<span class="unlike hide fa fa-thumbs-up" data-id="”>

likes

$(document).ready(function(){
// when the user clicks on like
$(‘.like’).on(‘click’, function(){
var postid = $(this).data(‘id’);
$post = $(this);

$.ajax({
url: ‘index.php’,
type: ‘post’,
data: {
‘liked’: 1,
‘postid’: postid
},
success: function(response){
$post.parent().find(‘span.likes_count’).text(response + ” likes”);
$post.addClass(‘hide’);
$post.siblings().removeClass(‘hide’);
}
});
});

// when the user clicks on unlike
$(‘.unlike’).on(‘click’, function(){
var postid = $(this).data(‘id’);
$post = $(this);

$.ajax({
url: ‘index.php’,
type: ‘post’,
data: {
‘unliked’: 1,
‘postid’: postid
},
success: function(response){
$post.parent().find(‘span.likes_count’).text(response + ” likes”);
$post.addClass(‘hide’);
$post.siblings().removeClass(‘hide’);
}
});
});
});

CSS:::-
body {
padding-top: 100px;
}
.post {
width: 30%;
margin: 10px auto;
border: 1px solid #cbcbcb;
padding: 5px 10px 0px 10px;
}
.like, .unlike, .likes_count {
color: blue;
}
.hide {
display: none;
}
.fa-thumbs-up, .fa-thumbs-o-up {
transform: rotateY(-180deg);
font-size: 1.3em;
}