Нажмите кнопку, добавьте данные в SQL и нажмите еще раз, чтобы удалить данные, нужен код php

Question

На странице списка сообщений, которую я сделал, я добавил любимую кнопку в Javascript. Но я не могу использовать его как любимую кнопку. Я хочу, чтобы, когда я нажимал на кнопку, значение добавлялось в мою базу данных, поскольку кнопка становится красной. И повторное нажатие удалит значение.

Созданная мной кнопка JavaScript

Имя моей таблицы tbl_post и имя атрибута fav_button

мой код пост-листа. php

">

$('.favme').click(function() {
	$(this).toggleClass('active');
});

$(".favme").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
});


$(".favme").on('animationend', function(){
  $(this).toggleClass('is_animating');
});

 .flexbox {
	 display: flex;
	 height: 100%;
	 justify-content: center;
	 align-items: center;
}
 .fav-btn {
	 display: flex;
	 height: 100%;
	 justify-content: center;
	 align-items: center;
}
 @keyframes favme-anime {
	 0% {
		 opacity: 1;
		 font-size: ms(0);
		 -webkit-text-stroke-color: transparent;
	}
	 25% {
		 opacity: 0.6;
		 color: #fff;
		 font-size: ms(-2);
		 -webkit-text-stroke-width: 1px;
		 -webkit-text-stroke-color: #dc3232;
	}
	 75% {
		 opacity: 0.6;
		 color: #fff;
		 font-size: ms(3);
		 -webkit-text-stroke-width: 1px;
		 -webkit-text-stroke-color: #dc3232;
	}
	 100% {
		 opacity: 1;
		 font-size: ms(2);
		 -webkit-text-stroke-color: transparent;
	}
}
 @keyframes favme-hover {
	 from {
		 font-size: ms(3);
	}
	 80% {
		 font-size: ms(2);
	}
}
 .favme {
	 display: block;
	 font-size: ms(2);
	 width: auto;
	 height: auto;
	 cursor: pointer;
	 box-shadow: none;
	 transition: all 0.2s ease;
	 color: #cbcdce;
	 margin: 0;
}
 .favme.active {
	 color: #dc3232;
}
 .favme:hover {
	 animation: favme-hover 0.3s infinite alternate;
}
 .favme.is_animating {
	 animation: favme-anime 0.3s;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">




<div class="flexbox">

									<div class="fav-btn">
										<span href="" class="favme dashicons dashicons-heart"><i class="fas fa-heart"></i></span>
									</div>
									
								</div>

Answer 1

Вот небольшой скрипт.

/*using ajax*/

$('#fav').click(function() {
   $e = $(this);
   $status =  $e.data('status');
   $id =  $e.data('id');
	 $operation = ($status)?'add':'remove';
   $.ajax({
    url: "http://example.com/addtofav",
    cache: false,
    data:{'id':$id,'operation':$operation},
    success: function(data){
       if($status){
        $e.addClass('nonfavpro')
        $e.removeClass('favpro')
        $e.data('status',false)
       }else{
        $e.addClass('favpro')
        $e.removeClass('nonfavpro')
        $e.data('status',true)
       }
    }
   });
});

/*Without ajax simple change property of button*/
$('#fav1').click(function() {
   $e = $(this);
   $status =  $e.data('status');
    if($status){
        $e.addClass('nonfavpro')
        $e.removeClass('favpro')
        $e.data('status',false)
       }else{
        $e.addClass('favpro')
        $e.removeClass('nonfavpro')
        $e.data('status',true)
       }
       
});

.favpro{
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.nonfavpro{
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
**using-Ajax**
<button id="fav" data-id="1" data-status="false" class="nonfavpro">Add to fav</button>

**Non-Ajax**
<button id="fav1" data-status="false" class="nonfavpro">Add to fav</button>

Надеюсь, это поможет:)