I want to write a function that will run when the "RUN TEST" button is pressed. This function is designed to hide the two buttons on the next page. Because the application reloads the entire page after pressing this button.

My problem is that when I press the "RUN TEST" button, the buttons I want to hide are not available yet.

$(document).ready(function () {
const button = findButtonByText("RUN TEST");

$(document).on("click", button, function() {
    hideUnnecessaryButtons();
});

function hideUnnecessaryButtons() {
    const buttonsToHide = ["DELETE", "ADD PERSON"];
    for(let j = 0; j < buttonsToHide.length; j++) {
        const button = findButtonByText(buttonsToHide[j]);              
        if(button !== undefined){
            button.style.display = "none";
        }
    }
}

function findButtonByText(text) {
    const buttons = document.querySelectorAll('button');
    for (let i = 0, l = buttons.length; i < l; i++) {
        if (buttons[i].innerText == text){
            return buttons[i];
        }
    }
}
});

How could I improve this feature to access loaded buttons this way?