How to Correctly Reset and Re-generate a Math Quiz in JavaScript?

I’m working on a simple math quiz application using JavaScript, where users have to solve randomly generated math problems. I’ve written a function to handle the quiz logic and user interactions, but I’m encountering a few issues with resetting and re-generating the quiz.

const randomQuiz = (function() {
const firstPara = document.querySelector(".firstNumber");
const operatorPara = document.querySelector(".operator");
const secondPara = document.querySelector(".secondNumber");
const buttonIt = document.querySelector(".answer");
const inputAnswer = document.querySelector(".textanswer");
const container = document.querySelector(".container");
const answerGet = document.querySelector(".asnwerGet");
const didit = document.querySelector(".didit");
let randomOperator = ["*", "+", "-", "/"];

const quastion = {
    firstNumber: Math.floor(Math.random() * 100),
    operator: randomOperator[Math.floor(Math.random() * randomOperator.length)],
    secondNumber: Math.floor(Math.random() * 100),
};

buttonIt.addEventListener("click", () => {
    firstPara.textContent = quastion.firstNumber;
    operatorPara.textContent = quastion.operator;
    secondPara.textContent = quastion.secondNumber;
    container.append(firstPara);
    container.append(operatorPara);
    container.append(secondPara);
});

answerGet.addEventListener("click", () => {
    const answer = calculation();
    if (inputAnswer.value == answer) {
        console.log(`You did it`);
        didit.textContent = `You did it! The answer is ${calculation()} !!!!!`;
        resetGame();
    } else {
        console.log(`Nice try`);
        console.log(`Answer is ${calculation()}`);
    }
});

function calculation() {
    if (quastion.operator === "-") {
        return quastion.firstNumber - quastion.secondNumber;
    } else if (quastion.operator === "*") {
        return quastion.firstNumber * quastion.secondNumber;
    } else if (quastion.operator === "+") {
        return quastion.firstNumber + quastion.secondNumber;
    } else if (quastion.operator === "/") {
        return +(quastion.firstNumber / quastion.secondNumber).toFixed(2);
    }
}
    
function resetGame() {
    firstPara.textContent = "";
    operatorPara.textContent = "";
    secondPara.textContent = "";    
    // Here should be a mechanism to generate a new question
}
})();

My goal is everytime i get correct answer quastion will reset automatically.
but i am always getting same quastion for some reason i think problem is at buttonIt function always appending same value but how will i converting them into random ones ?
I’m also using querySelector to select DOM elements and append them to the container, but I’d like to know if there’s a more efficient approach.
The calculation function correctly computes the result based on the operator, so I believe the core logic is functioning as expected.
Thank you!
I’ve cleared the text content of the display elements, but this does not automatically generate new question values.
I tried adding new random values directly inside the resetGame function but need advice on integrating this properly.
Any suggestions or improvements to address these issues would be greatly appreciated!