I am trying to check 25 boxes with random numbers and only be able to click each box if another one was already clicked?

I’m working on a small game. The point of the game is, you get random numbers, and you need to click those numbers in order from 1 through 25. The catch is you shouldn’t be able to click a number until certain conditions are met:

#1 is clickable at the beginning of the game.
#2 You cannot click unless #1 was already clicked and background changed to green. Same goes for #3, #4 and so on. You should only be able to click these buttons in the correct sequences.

I can’t seem to implement the logic. I don’t know if I have a mistake in my code somewhere.

What I tried so far is basically, when I click a box with #1 in it, I push that value into a clickedBoxes array. Then I tried implement different checks, from index checking etc. but I can’t seem to get it to work.

Any help would be appreciated.

const startBtn = document.querySelector('.start-btn')
const resetBtn = document.querySelector('.reset-btn')
const timer = document.querySelector('.time__countdown')
const squares = document.querySelectorAll('.grid .square');
const seperateSquare = document.querySelectorAll('.grid');
let gameStarted = false;
let counter = 60
let timeInterval;

let clickedSquares = []

startBtn.addEventListener('click', startGame)

function startGame() {
  gameStarted = true;

  randomNumber()

  timeInterval = setInterval(function() {
    counter--
    if (counter >= 0) {
      timer.innerHTML = `Time left: ${counter}`
    }
  }, 1000)

}

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function randomNumber() {
  const numArray = []

  for (let i = 1; i < 26; i++) {
    numArray.push(i)
  }

  numArray.sort(() => 0.5 - Math.random())

  for (let i = 0; i < squares.length; i++) {
    const random = Math.floor(Math.random() * 25)

    squares[i].textContent = numArray[i]
    squares[i].style.fontSize = random + 15 + "px";
    squares[i].style.color = getRandomColor()
    squares[i].style.backgroundColor = '#000000'
    squares[i].addEventListener('click', function() {
      clickedSquares.push(numArray[i])
      console.log(clickedSquares)

      // clickedSquares.map((x,y) => {

      //   if (clickedSquares[0] === 1 && x === 1) {
      //     return squares[i].style.backgroundColor = 'green'
      //   } else if (clickedSquares[1] === 2 && x === 2 && clickedSquares[0] === 1 && x === 1) {

      //   } return squares[i].style.backgroundColor = 'green'


      //   console.log(x)
      //   console.log(clickedSquares[0])

      // })


    })
  }




}

resetBtn.addEventListener('click', function() {
  clearInterval(timeInterval)
  counter = 60
  timer.innerHTML = `Time left: 60`
  gameStarted = false
  squares.forEach((n) => {
    n.textContent = "";
    n.style.backgroundColor = "#000000";
  })



})

* {
  margin: 0;
  padding: 0;
}

body,
html {
  min-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

img {
  max-width: 100%;
  display: block;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24%;
  background-color: #6688CC;
  border-radius: 10px;
}

.grid {
  border: 2px solid black;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #ACBFE6;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.square {
  border: 2px solid black;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.time {
  padding-bottom: 2em;
  padding-top: 1em;
}

.btn {
  margin: 1em;
  padding: 1em;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  background-color: #6688CC;
  border: 2px solid black;
}

.btn:hover {
  background-color: #ACBFE6
}

.buttons {
  display: flex;
}

.square-selected {
  background-color: red;
}

<main>
  <div class="time">
    <p class="time__countdown">Time left: 60</p>
  </div>
  <grid class="grid">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </grid>
  <div class="buttons">
    <button class="btn start-btn">Start Game</button>
    <button class="btn reset-btn">Reset Game</button>
  </div>
</main>