Q:

Interchange buttons to JS by deactivating and reactivating them

So here we go, I have 2 buttons that switch between them and I'd like to make sure to remove the click until the bind again to avoid spam. The buttons will switch all the time unless in the playRound click we get a JSON telling us otherwise.
I wish that after his click it won't be able to do it again until I bind the button again with the next button.
that's what i tried:
function for bind the button "NextStage"
function bindNextStage() {
    $('#nextStage').show().click(function () {
        let $pkEnemy = document.getElementById('pkEnemy').innerText;
        $('#nextStage').hide().click(false);
        $.ajax({
            url: '/nextEnemy/' + $pkEnemy,
            type: 'get',
            dataType: 'json',
        }).done(function (result) {
            console.log("refresh some data");
            bindPlayRound();
        });
    });
}

function for bind playRound
function bindPlayRound($pkParty) {
    $('#playRound').show().click(function () {
        let $pkEnemy = document.getElementById('pkEnemy').innerText;
        $('#playRound').click(false).hide();
        $.ajax({
            url: '/playRound/' + $pkEnemy,
            type: 'get',
            dataType: 'json',
        }).done(function (result) {
                addBattleReport(result).then(r => {
                    console.log("do something with an other button")
                });
                console.log("refresh some data")
                if (result['isEnded'])
                        console.log('END');
                else if (result['enemy']['hp'] <= 0) {
                    bindNextStage();
                }
                else{
                    bindPlayRound()
                }
        });
    });
}

and i call for begin
bindNextStage()

----EDIT----
For the moment I can click on the button again if I do F12 and display the button but in addition to that the function launches 3 times. The button is well hidden when I click on it but it does not unbind and has a strange behavior when launched 3 times.
----EDIT 2---
I understood that the fact that the ".click" function is not unbinded by the .click(false) launches my function as many times as I bind it.

A:

You can use off() or unbind() function of jQuery to remove event listener on the button. It'll work, instead of your use click(false)
 $('#nextStage').hide().unbind("click");
 $('#playRound').hide().unbind("click");

