'Create PHP function with multiple actions in order

I have created a site using Wordpress and Elementor Pro. Users register, and load a profile onto the site and enter information about themselves that is collected as metadata.

I am trying to display a certain pop up (14388) when a user enters a specific piece of information ($reaction_time), and a different pop up (14396) if that same piece of information is deleted later on.

I only want to display each pop-up once per user, so I created a meta tag called clash_available_message that marks whether the pop up has been displayed or not (yes or no).

So if the user enters the information for the first time and the clash_available_message meta is 'no' then the pop up (14388) is displayed on refresh, and the clash_available_message meta is changed to 'yes'. If the user then refreshes the page or updates the same information, they won't get the pop-up.

The same is then supposed to happen when the user deletes the information (except with a different pop up: 14396).

My problem is that the meta updates between 'yes' and 'no' but the pop-up only appears sometimes. I have included my code below - my echo in the footer is working perfectly too.

I'm new to PHP, so I might be over-complicating things, but it seems like the meta data is sometimes updating quicker than the time it takes to trigger the pop-up. Is this possible?

Is there a way to order the actions so that:

a) The pop up is displayed first, and only then; b) The meta data is updated

Any guidance would be hugely appreciated.

// 25. Display Clash Available message when Athletic Traits complete

        add_action( 'wp_footer', 'clash_available_function', 10, 5);
        function clash_available_function(){

        $current_user = wp_get_current_user();
    
        $reaction_time = get_user_meta($current_user->ID, 'reaction_time', true);
        $clash_available = get_user_meta($current_user->ID, 'clash_available_message', true);
    
        if ((!empty($reaction_time) || $reaction_time != 0) && ($clash_available != 'yes')) {
    
        echo 'yes';
            
          echo "<script>  window.onload = function() {   
        elementorProFrontend.modules.popup.showPopup( {id:14388}, event);    }  
        </script>";
        
        update_user_meta($current_user->ID, 'clash_available_message', 'yes');
            
            }
        }

// 26. Display Clash Unavailable message when Athletic Trait deleted

        add_action( 'wp_footer', 'clash_unavailable_function', 10, 5);
        function clash_unavailable_function(){

        $current_user = wp_get_current_user();
    
        $reaction_time = get_user_meta($current_user->ID, 'reaction_time', true);
        $clash_available = get_user_meta($current_user->ID, 'clash_available_message', true);
    
        if ((empty($reaction_time) || $reaction_time == 0) && ($clash_available == 'yes')) {
    
        echo 'no';
            
          echo "<script>  window.onload = function() {   
        elementorProFrontend.modules.popup.showPopup( {id:14396}, event);    }  
        </script>";
        
        update_user_meta($current_user->ID, 'clash_available_message', 'no');
            
            }
        }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source