Remove Facebook Login Button SDK after a logout

My site is using both PHP SDK to generate login button Javascript SDK to generate logout button. This is because I need login button in the server side so it needs to redirect to other location.

Whereas the logout button needs to be in the application side since the server cannot grab a session that was previously created.

When nobody is logged in the site, the PHP login button suppose to appeared whereas the Javascript login button suppose to disappear using jquery empty() function.

Most of the time, the solution works, but apparently there's a race condition where the Javascript button is not deleted, which I cannot figure out the cause.

// This is called with the results from from FB.getLoginStatus().
            function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    testAPI();
                } else if (response.status === 'not_authorized') {
                    // The person is logged into Facebook, but not your app.
                        $(\".fb-login-button\").empty();
                } else {
                    // The person is not logged into Facebook, so we're not sure if
                    // they are logged into this app or not.
                    $(\".fb-login-button\").empty();
                }
            }

            // This function is called when someone finishes with the Login
            // Button.  See the onlogin handler attached to it in the sample
            // code below.
            function checkLoginState() {
                FB.getLoginStatus(function(response) {
                    statusChangeCallback(response);
                });
            }

            window.fbAsyncInit = function() {
                FB.init({
                appId      : '".FB_APP_ID."',
                xfbml      : true,
                version    : 'v2.2'
                });

                FB.Event.subscribe(\"auth.logout\", function() {
                    $(\".fb-login-button\").empty();
                    $(\"#facebook-message\").empty();
                });

and the following is the button tag:

<div class="fb-login-button" data-max-rows="1" data-size="xlarge"  data-show-faces="false" data-auto-logout-link="true"></div>   

As written above, I call $(".fb-login-button").empty() where there is no authorization and when after logout.

But this doesn't always delete the button because of the race condition. Any ideas where to put empty() function to avoid race condition?

regards