I have four <a> tags on a page; they need to be enabled or disabled depending on a user’s assigned role. (I’m resetting the href value and reducing opacity on the disabled elements.) Right now, there’s a 50% chance that not all of the elements will be evaluated on page load (but they successfully evaluate on reload). In development, I had to use a nested setTimeout() to get them to evaluate at all. What can I do to speed up the execution of the code? Perhaps it shouldn’t be running inside of $(document).ready()? Is my approach all wrong? TIA for your help!

const arrTiles = [[8, 'EnvironmentalHealthSafety'], [9, 'SalesAndFinance'], [18, 'PrivacyAndSafeguards'], [25,'HumanResources']];
const checkTileAccess = (tile) => {
    if (!user().hasRole(tile[0])) {
        $('#healthscorefactors').find('a[href*="' + tile[1] + '"]').prop('href', '#').css({ 'opacity': '0.33', 'cursor': 'default' });
        $('#healthscorefactors').find('a[href*="' + tile[1] + '"]').find('img.tooltip').off('click').removeAttr('title');
    }
};

$(document).ready(function () {
    if (!user().hasAccess('CNAdmin') && !user().hasAccess('Admin') && !user().hasAccess('ChannelPartner') && !user().hasAccess('Supervisor')) {
        let k = 0;
        setTimeout(function () {
            checkTileAccess(arrTiles[k]);
            k++;
            setTimeout(function () {
                checkTileAccess(arrTiles[k]);
                k++;
                setTimeout(function () {
                    checkTileAccess(arrTiles[k]);
                    k++;
                    setTimeout(function () {
                        checkTileAccess(arrTiles[k]);
                    }, 300)
                }, 300)
            }, 300);
        }, 300);
    } 
})