Remember the state of clicked button with AJAX

Question

I have different cards displayed on an app, the information is coming from the database in a loop. I have the option to put a 'redeem button' on cards if it's something a user can use just once. When the user clicks the redeem button, I get in the database the information (card name, clientID). Then, I made another AJAX call to get the information from the database and what I want is to check if the clientID and the carndame are already in the database then delete it just for that user. I don't wanna use localStorage or cookies because if the user delete the cookies they would see the card again and I don't want this to happen.

-- AJAX CALL TO POST --

$(`#promotion-container .promo${i} .redddButt`).click(function(e){
    e.stopPropagation();
    var esc = $.Event("keyup", { keyCode: 27 });
    $(document).trigger(esc);

    $('#deletePromo').on('click', function(){
        if (eventName && customerID)
        $(`#promotion-container .promo${i}`).remove() // this removes it but if you reload the page it appears again.
    })

    $('#just-claimed-popup2').addClass('reveal');
    var theDiv = document.getElementById("card-just-claimed");
    var content = document.createTextNode(eventName);
    theDiv.appendChild(content);

    $.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        }
    });
})

--AJAX CALL TO GET INFO FROM DATABASE --

let success = function(res, eventName) {
    let cardData = res['cardData'] //cardData is the info from database

    for(i=0; i<cardData.length; i++){
        let nameEvent = cardData[i]['event_name']
        let customerID = cardData[i]['customer_id']
        let clicked_button = cardData[i]['clicked_button']

        let eventName1 = promotions['event_name'] // getting the names of all cards displayed

        if(customerID && nameEvent == eventName1){
            $(`#promotion-container .promo${i}`).remove(); // HERES THE PROBLEM
        }
}
}

$.ajax({
    type: 'GET',
    url: '/api/promotions-check',
    crossDomain: true,
    dataType: 'json',
    success: success,
});

The problem is that my conditional on my GET call is successful but it forgets the id of the card, meaning that when I try to console.log the id of the promo it comes as 0, instead of the actual number, so it's forgetting the information of the cards rendered and don't know what to delete.

What would be the best way to achieve the card to be deleted? Do I need to do it in the click event too? and if yes, can I have 2 Ajax calls in the same function?

Answer 1

If you change the approach you would be able to achieve this more easily. When you send a post request to delete the item or redeem the code in your case, upon success return same data and upon some condition just delete the item from DOM. On page load it shouldn't load whichever was redeemed.

I personally don't see a point of doing another GET to delete the code which was redeemed.

$.ajax({
        type: 'POST',
        url: '/api/promotions_redemption',
        crossDomain: true,
        dataType: 'json',
        data: {
            eventName : eventName,
            dateReedem : dateReedem,
        },
        success: function(result){
        //on success, ie when the item is deleted -> delete from the DOM. 
        }
    });