How to use call this function only once

Question

$('#link-1').click(function(e) {
    $link_1 = '1';
    window.open('<?php echo $deliverLink1; ?>');
    myAjax();
    if( $link_1 != '' && $link_2 != ''){
     setTimeout(function() {
        $('#download-now-button').removeClass('not-allowed');
        $("i").removeClass("fa-lock").addClass("fa-unlock-alt");
        $("button.locked-button").removeClass("locked-button").addClass("unlocked-button");
        $("a.button-generator").attr("href", "<?php echo  $deliverFlink; ?>");
        }, 3000);
    }
});

$('#link-2').click(function(e) {
    $link_2 = '1';
    myAjax2();
    window.open('<?php echo $deliverLink2; ?>');
    if( $link_1 != '' && $link_2 != '' ){
     setTimeout(function() {
        $('#download-now-button').removeClass('not-allowed');
        $("i").removeClass("fa-lock").addClass("fa-unlock-alt");
        $("button.locked-button").removeClass("locked-button").addClass("unlocked-button");
        $("a.button-generator").attr("href", "<?php echo $deliverFlink; ?>");
        }, 3000);
    }
});

So, my problem is that people have to click on 1 & 2, BUT, if both are clicked a function should be completed, but only by the button, that was clicked, so here both functions, add a lock and all that, but I want them to only add one lock icon. I know the question is stupid, but I am quite new in all that. Oh, and also how to change the php echo to js variables

Answer 1

You could initialize separate variables to keep track of clicks:

let link1_click = 0;
let link2_click = 0;

$('#link-1').click(function(e) {
    link1_click++;
    if (link2_click) functionToRunWhenBothClicked();
    $link_1 = '1';
    window.open('<?php echo $deliverLink1; ?>');
    myAjax();
    if( $link_1 != '' && $link_2 != ''){
     setTimeout(function() {
        $('#download-now-button').removeClass('not-allowed');
        $("i").removeClass("fa-lock").addClass("fa-unlock-alt");
        $("button.locked-button").removeClass("locked-button").addClass("unlocked-button");
        $("a.button-generator").attr("href", "<?php echo  $deliverFlink; ?>");
        }, 3000);
    }
});

$('#link-2').click(function(e) {
    link2_click++;
    if (link1_click) functionToRunWhenBothClicked();
    $link_2 = '1';
    myAjax2();
    window.open('<?php echo $deliverLink2; ?>');
    if( $link_1 != '' && $link_2 != '' ){
     setTimeout(function() {
        $('#download-now-button').removeClass('not-allowed');
        $("i").removeClass("fa-lock").addClass("fa-unlock-alt");
        $("button.locked-button").removeClass("locked-button").addClass("unlocked-button");
        $("a.button-generator").attr("href", "<?php echo $deliverFlink; ?>");
        }, 3000);
    }
});

It looks like you're already echoing PHP values into the script, so you can do the same when assigning values to JS variables:

let string_var = '<?php echo $some_string_value; ?>';
var numeric_var = <?php echo $some_number; ?>;