when 'add to cart' button is clicked ,it should be disabled until product is removed from the user's cart page

Question

I am doing my first project in web development. i am using php ajax and jquery. I am looking for a solution to the following problem:

When a user clicks 'add to cart' button, that (product/'add to cart' button for that product) should be disabled for that particular user until the user removes the product from his cart page. ie user should not be able to add the same product again and again into the cart.

this is my javascript file,"init.js"

('.add_to_cart').on('click dblclick',adding);
//$("body").on(".add_to_cart","click",adding);
function adding(e) {
    e.preventDefault();
     var prodid =$(this).attr("id");
    var that = $(this);
    that.off("click dblclick"); 
    $.ajax({
        type: "POST",
        url: "addcart.php",
        data:{prodid:prodid}
    }).done(function(msg) {
         alert(msg);
    }).always(function() {
        that.off("click dblclick",adding); 
    })

};

this is php file,"addcart.php"

<?php
session_start();
/*if(isset($_SESSION['islogged'])){

  if(!isset($_SESSION['username']))
 echo "Please log in to add books to your cart";
}
*/

require_once 'connect.inc.php';
if (isset($_POST['prodid'])) {
  if (!empty($_POST['prodid'])) {

    if (!isset($_SESSION['username'])) {
      echo "Please log in to add books to your cart";
    } else {
      $product_id = $_POST['prodid'];
      $username = $_SESSION['username'];
      $query = "SELECT * FROM `books1` where `id`='$product_id'";
      $query_run = mysqli_query($link, $query);
      while ($row = mysqli_fetch_assoc($query_run)) {
        $productname = $row['name'];
        $productid = $row['id'];
        $productauthor = $row['author'];
        $productpublication = $row['publication'];
        $productcategory = $row['category'];
        $productsubcategory = $row['sub_category'];
        $productborrowalprice = $row['borrowal price'];
        $productimage = $row['image'];
        $query1 = "INSERT into `cart`(`user_name`,`p_id`,`p_name`,`p_author`,`p_publication`,`p_category`,`p_subcategory`,`p_borrowalprice`,`p_image`,`qty`)VALUES('$username',$productid,'$productname','$productauthor','$productpublication','$productcategory','$productsubcategory','$productborrowalprice','$productimage',0)";
        $result = mysqli_query($link, $query1);
        if ($result) {
          echo 'successful';
        } else {
          die(mysqli_error($link));
        }
      }
    }
  }
}
?>

Answer 1

you use btn.loading and btn.reset. save your btn as a variable to avoid clashes when the scope changes.

$('.add_to_cart').on('click dblclick',adding);
//$("body").on(".add_to_cart","click",adding);
function adding(e) {
 var cur = $(this).button("loading");
    e.preventDefault();
     var prodid =$(this).attr("id");
    var that = $(this);
    that.off("click dblclick"); 
    $.ajax({
        type: "POST",
        url: "addcart.php",
        data:{prodid:prodid}
    }).done(function(msg) {
         alert(msg);
    }).always(function() {
        that.off("click dblclick",adding); 
      cur.reset()

    })

};