It doesn't call the function but it jumps to the top of clickevent instead?

Question

This is an excercise creating a replica of the Simon Game. The program randomly choses an increasing sequence of colors that the player must remember and replicate.

The first game works perfectly as far as I saw, but after failing the first the second game doesn't work. I thouroughly parsed the code using devtools and found that in the second game everything runs perfectly, when pressing the correct button. The nested if statements are fulfilled but when arrive to calling the function (setTimeout(nextRandomSequence,1500);) instead of executing the function (which works in the first game) it jumps back to the top of the click event replicating the button pressing. This duplicate the pressing in the variable gamePattern that then fails to pass the if test (equality between gamePattern and userClickedPattern arrays). Why?

let userClickedPattern = []

let gamePattern = []

var randomChosenColor = []

let buttonColors = ["green", "red", "yellow", "blue"]

let level = 1

if (level === 1) {

  // Press key to start and change title to level 1

  $(document).keypress(function() {

    $("#level-title").text("Level " + level);

    // Select first color in game pattern

    nextRandomSequence();

    //Click event listener

    $("div[type='button']")
      .click(function sequence(e) {

        let userChosenColor = e.target.id
        console.log("user chosen color: " + userChosenColor);
        pressButtonAnimation(userChosenColor);
        playSound(userChosenColor);
        userClickedPattern.push(userChosenColor);

        console.log("compare arrays userClicked/gamePattern " + userClickedPattern + " " + gamePattern);


        if (userClickedPattern[userClickedPattern.length - 1] === gamePattern[userClickedPattern.length - 1]) {
          if (userClickedPattern.length === gamePattern.length) {
            $("#level-title").text("Level " + level);
            console.log(level);
            console.log("----- continue ---------");
            setTimeout(nextRandomSequence, 1500);
          }
        } else {
          console.log("----- game over ---------");
          playSound("wrong");
          gameOverAnimation(userChosenColor);
          $("#level-title").text("GAME OVER, your arrived to level " + level + " press any key to start");
          restartGame();
          console.log(level);
        }

      });

  });

}

// select next color of game pattern. Push chosen color in gamePattern

function nextRandomSequence() {
  console.log("--------- inside nextRandomSequence -------------")
  userClickedPattern = []
  randomNumber = Math.floor(Math.random() * 4);
  var randomChosenColor = buttonColors[randomNumber]
  gamePattern.push(randomChosenColor);
  level++;

  $("#" + randomChosenColor).fadeIn(300).fadeOut(300).fadeIn(300);
  playSound(randomChosenColor);


  console.log("random chosen color " + randomChosenColor);

}

function playSound(name) {
  var audio = new Audio("sounds/" + name + ".mp3");
  audio.play();
}

function pressButtonAnimation(colorPressed) {
  $("#" + colorPressed).addClass("pressed");
  setTimeout(function() {
    $("#" + colorPressed).removeClass("pressed");
  }, 100)
}

function gameOverAnimation(colorPressed) {
  $("body").addClass("game-over");
  setTimeout(function() {
    $("body").removeClass("game-over");
  }, 200)
}

function restartGame() {
  level = 1
  gamePattern = []
}

body {
  text-align: center;
  background-color: #011F3F;
}

#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 3rem;
  margin: 5%;
  color: #FEF2BF;
}

.container {
  display: block;
  width: 50%;
  margin: auto;
}

.btn {
  margin: 25px;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  border-radius: 20%;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pressed {
  box-shadow: 0 0 20px white;
  background-color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Simon</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
  <h1 id="level-title">Press a Key to Start</h1>
  <div class="container">
    <div lass="row">

      <div type="button" id="green" class="btn green">

      </div>

      <div type="button" id="red" class="btn red">

      </div>
    </div>

    <div class="row">

      <div type="button" id="yellow" class="btn yellow">

      </div>
      <div type="button" id="blue" class="btn blue">

      </div>

    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="game.js" charset="utf-8"></script>

</body>

</html>