Changing the logic - jQuery

Question

I have several buttons from which you add and remove products from an external file, but that’s just a detail. Every time the buy button is clicked, the product is added, the button is "changed" to remove and all other buttons are disabled to click until the same product is removed from the remove button.

I need to change this logic to this: Every time the buy button is clicked, the product is added and the button is "changed". However, if another buy button is clicked, the product that was added is removed and the same is added in place of it.

Note: the functions addCartao and removeCartaotoCart, add or remove the product.

Button code:

 <button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Comprar</span></span></button>
 <button style="display: none;" type="button" id="cartaoMensagemRemover<?php echo $_product->getId(); ?>" class="button btn-cart" onclick="removeCartaotoCart('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Remover</span></span></button>

Code for Ajax requests:

function addCartao(product_id){
    $j('#cartaoMensagem'+product_id).hide();
    $j('#cartaoMensagemRemover'+product_id).show();
    $j.ajax({
      type: "POST",
      url: "adiciona.php",
      data: {
        product_id: product_id
      },
      dataType: 'json',
      cache : false,
      beforeSend: function () {

      },
      success: function (retorno) {
        var button = $j('#cartaoMensagemRemover'+product_id);

        $j('#cartao').find(':button').not(button).attr('disabled',true);
        $j('.item-custom').append('<tr id="trAppend"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
        getSubTotal();
        getGrandTotal();
      },
      complete: function () {

      },
      error: function (x,y,z) {
        alert("error");
        alert(x);
        alert(y);
        alert(z);
        window.location.reload();
        history.go(0);
        window.location.href=window.location.href;
      }
  });
}



 function removeCartaotoCart(itemId){
        $j('#cartaoMensagemRemover'+itemId).hide();
        $j('#cartaoMensagem'+itemId).show();
        $j.ajax({
            type:"POST",
            url:"remove.php",
            data:{
                itemId: itemId
            },
            cache: false,
            beforeSend: function(){

            },
            success: function(retorno){
                var button = $j('#cartaoMensagemRemover'+itemId);
                $j('#cartao').find(':button').attr('disabled',false);
                $j('.item-custom #trAppend').remove();
                getSubTotal();
                getGrandTotal();

            },
            complete: function () {

            },
            error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
        });
    }

Answer 1

The change made in the code to change the logic was the addition of a variable to save the product id so that it is removed if there is already one.

Updated Ajax request code:

    var productSelected = "";
    function addCartao(product_id){
        alert(product_id);
        if( productSelected != "" ){
            removeCartaotoCart(productSelected);    // Remove the item in cart, if there is one.
          }
        $j('#cartaoMensagem'+product_id).hide();
        $j('#cartaoMensagemRemover'+product_id).show();
        $j('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000'});
        $j.ajax({
          type: "POST",
          url: "adiciona.php",
          data: {
            product_id: product_id
          },
          dataType: 'json',
          cache : false,
          beforeSend: function () {

          },
          success: function (retorno) {
            var button = $j('#cartaoMensagemRemover'+product_id);
            productSelected = product_id;  


            $j('.item-custom').append('<tr id="trAppend"<?php echo $_product->getId(); ?>><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
            getSubTotal();
            getGrandTotal();
          },
          complete: function () {

          },
          error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
      });
    }

    function removeCartaotoCart(itemId){
        productSelected = ""; 
        $j('#cartaoMensagemRemover'+itemId).hide();
        $j('#cartaoMensagem'+itemId).show();
        $j.ajax({
            type:"POST",
            url:"remove.php",
            data:{
                itemId: itemId
            },
            cache: false,
            beforeSend: function(){

            },
            success: function(retorno){
                var button = $j('#cartaoMensagemRemover'+itemId);

                $j('.item-custom #trAppend').remove();
                getSubTotal();
                getGrandTotal();
                alert("Sucess removeCartao");
            },
            complete: function () {
                alert("complete removeCartaotoCart");
            },
            error: function (x,y,z) {
            alert("error");
            alert(x);
            alert(y);
            alert(z);
            window.location.reload();
            history.go(0);
            window.location.href=window.location.href;
          }
        });
    }