Почему мой код выполняет случайную функцию внутри дважды?

Question

У меня есть некоторый написанный код, предназначенный для создания игры Simon. JS и HTML поток кода идет как на fre sh start случайное число генерирует число и соответственно цвет выбирается, но когда я открываю его в браузере, случайная функция выполняется дважды и, следовательно, цвет мигает дважды. Любая помощь приветствуется

JS Код

$(document).ready(function() {
  var gamePattern = [];
  var userClickedPattern = [];
  var buttonColors = ["red", "blue", "green", "yellow"];
  var level = 0;



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

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

  };

  function nextSequence() {
    $("h1").text("level " + level);
    level++;
    var next = Math.floor(((Math.random() * 4)));
    var nextColor = buttonColors[next];
    return nextColor
  };

  function randomColorChooser() {
    var nextColor = nextSequence();
    gamePattern.push(nextColor);
    $('#' + nextColor).fadeIn().fadeOut().fadeIn();
    playSound(nextColor);
    $(".btn").on("click", function() {
      var userChosenColour = $(this).attr("id");
      userClickedPattern.push(userChosenColour);
      playSound(userChosenColour);
      animatePress(userChosenColour);
      checkAnswer(level);
    })
  };

  function checkAnswer(currentLevel) {
    if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
      return "success"
    } else {
      return "failed"
    };
  }

  $(document).on("keypress", function() {
    randomColorChooser();
  })
});