Script does't load in the following condition

I want to load a script only after the user logged in to the app and a certain page is visible. I set the page to display block in my ajax, and after that I say if the page is set to display block get the script but nothing happens.

What am I doing wrong?

// Login POST 
$('#frm-login').submit(function (e) {
    event.preventDefault()
    $loginButton.text('Please wait ...').prop('disabled')
    $.ajax({
        url: "/login-user",
        type: "POST",
        data: $('#frm-login').serialize(),
        dataType: "json"
    }).always(function (response) {
        $loginButton.text('Logging in').prop('disabled')
        console.log("Login", response)
        if (response.status == "error") {
            $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
            return
        }
        sessionStorage.setItem('token', response.token)
        if (sessionStorage.token) {
            $.ajax({
                type: "GET",
                url: "/verify-user",
                headers: {
                    'Authorization': 'Bearer ' + sessionStorage.token
                },
                dataType: "json"
            }).always(function (response) {
                console.log("Auth", response)
                if (response.status == "error") {
                    $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                    return
                }
                $('#index-page').css('display', 'none')
                $('#main-page').css('display', 'block')
            })
        }
    })
})

// add scripts to #main-page

if ($('#main-page').css('display') == 'block') {
    $.getScript('</script><script src="/js/socket.js"></script>')
    console.log("JS loaded")
}