How do I make my gameOver function in Javascript jQuery work?

I’m new to JS and I’mm doing a project but I keep having trouble with the feature that resets the game when you fail. When you press the wrong button in a memorizing game, it will reset but then the game breaks.

HTML & CSS

<!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 Any 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.7.1/jquery.min.js"></script>
  <script src="./game.js"></script>
</body>

</html>

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;
}

//varibles
const buttonColors = ['red', 'blue', 'green', 'yellow'];
let gamePattern = [];

let userClickedPattern = [];
let userChosenColor;

let level = 0;
let started = false;

function playSound(name) {
  let sound = new Audio('./sounds/'+name+'.mp3');
  sound.play();
}

function gameOver() {
  playSound('wrong');
  setTimeout(function () {
    $('body').removeClass('game-over');
  }, 500);
  $('#level-title').text('Game Over, Press Any Key to Restart');
  $('body').addClass('game-over');
  
  started = false;
  level = 0;
  gamePattern = [];
}

//get a sequence
function nextSequence() {
  userClickedPattern = [];
  level++;
  $('#level-title').text('Level '+level);

  let randomNumber = Math.floor(Math.random() * 4);
  let randomColor = buttonColors[randomNumber];
  gamePattern.push(randomColor);

  for (let i = 0; i < gamePattern.length; i++) {
    setTimeout(function () {
      $('#'+gamePattern[i]).animate({opacity: 0.25}, 100);
      setTimeout(function () {
        $('#'+gamePattern[i]).animate({opacity: 1}, 100);
      }, 25);
          
      playSound(gamePattern[i]);
    }, (500*(i+1)));
  }
}

//get the user sequence stuff
function animatePress(currentColor) {
  setTimeout(function () {
    $('#'+currentColor).removeClass('pressed');
  }, 100);
  $('#'+currentColor).addClass('pressed');
}

function userSequence() {
  $('.btn').click(function () {
    userChosenColor = $(this).attr('id');
    userClickedPattern.push(userChosenColor);
  
    animatePress(userChosenColor);
    playSound(userChosenColor);
    
    checkAnswer(userClickedPattern.length);
  });
}

//check if answer is right or wrong
function checkAnswer(currentLevel) {
  // let rightCounter = 0;
  // if (gamePattern.length == currentLevel) {
  //   for (let i = 0; i < gamePattern.length; i++) {
  //     if (gamePattern[i] == userClickedPattern[i]) {
  //       rightCounter++;
  //     } else {gameOver();}
  //   }
  //   if (rightCounter == gamePattern.length) {
  //     setTimeout(function () {
  //       userClickedPattern = [];
  //       nextSequence();
  //     }, 500);
  //   } else {gameOver();}
  // }
  if (gamePattern[currentLevel-1] == userClickedPattern[currentLevel-1]) {
    if (gamePattern.length == currentLevel) {
      setTimeout(function () {
        nextSequence();
      }, 500);
    }
  }
  else {
    gameOver();
  }
}

//start game
function startGame() {
  nextSequence();
  userSequence();
}

//start game
$('body').keydown(function () {
  if (started == false) {startGame(); started = true;}
});

I’ve asked chatGPT but it always gave me advanced stuff that I didn’t know what it did and I’d like to understand my code so if I ever come across a similar problem, I can solve it. When you press the wrong button (div element), it goes into game over, but in a glitched version. Anytime you click something, it will always be wrong even if it’s the right one. I’d like it to act normally.