Toggled boolean variable evaluated in conditional statement on click event

I am toggling the boolean variable "userTurn". There are two functions that set the value of "userTurn":

1. runGame(), which sets "userTurn" to true after the last sound in the current round is played.

2. buttonClick(), which should only be executed if "userTurn" is true. buttonClick sets "usetTurn" to false after the user successfully copies the current pattern, or if the user makes a mistake.

   I am evaluating the value of "userTurn" in a conditional statement that is inside of a click event.

   $(".quarter").on('click', function(){
       if( userTurn===true && isOn===true){
           var color = $(this).attr('id');
           clearTimeout(buzz);
           buttonClick(color);
       } 
   })
   
   

   After the user successfully copies the current pattern, or if the user makes a mistake, "userTurn" is set to false. The problem I am running into is, after "userTurn" is set to false, the code inside the conditional statement is still executing. The goal is for ".quarter" to only be clickable when "userTurn" is true. Why is the buttonClick() function still executing when ".quarter" is clicked even when "userTurn" is false??

Here are the two functions that set the value of "userTurn":

1. runGame():

   function runGame(){
       if(isOn===true){
           userTurn = false;
           count();
           playPattern(order, index);
           if(index===counter-1&&userTurn===false){
               userTurn=true;
               clearInterval(play);
               buzz = setTimeout(buzzer, 10000);
           }else{
               index++;
           } 
       } else {
           clearInterval(play);
           clearTimeout(buzz);
       }
   }
   
   

   2.buttonClick():

   function buttonClick(color){
       var yellowSound = document.getElementById("horseSound");
       var redSound = document.getElementById("endFx");
       var greenSound = document.getElementById("westernRicochet");
       var blueSound = document.getElementById("robotBlip");
       $("#red").mousedown(function(){
           $("#red").css("background-color", "#ff4d4d");
           redSound.play();
       });
       $("#red").mouseup(function(){
           $("#red").css("background-color", "#ff0000");
           redSound.pause();
       });
       $("#blue").mousedown(function(){
           $("#blue").css("background-color", "#0000e6");
           blueSound.play();
       });
       $("#blue").mouseup(function(){
           $("#blue").css("background-color", "#000099");
           blueSound.pause();
       });
       $("#green").mousedown(function(){
           $("#green").css("background-color", "#00e600");
           greenSound.play();
       });
       $("#green").mouseup(function(){
           $("#green").css("background-color", "#009900");
           greenSound.pause();
       });
       $("#yellow").mousedown(function(){
           $("#yellow").css("background-color", "#ffff4d");
           yellowSound.play();
       });
       $("#yellow").mouseup(function(){
           $("#yellow").css("background-color", "#ffff00");
           yellowSound.pause();
       });
       if(color===order[compareIndex]){
           userPattern.push(color);
           console.log(userPattern, "match");
           buzz = setTimeout(buzzer, 10000);
           compareIndex++;
           if(userPattern.length===counter){
               userTurn=false;
               compareIndex=0;
               index=0;
               counter++;
               count();
               userPattern.length=0;
               play = setInterval(runGame, 2000);
               clearTimeout(buzz);
           }
       } else {
           userTurn=false;
           console.log('don\'t match');
           clearTimeout(buzz);
           index=0;
           compareIndex = 0;
           userPattern.length=0;
           buzz = setTimeout(buzzer, 1);
       }
   }
   
   

TURN DOWN YOUR VOLUME BEFORE GOING TO THE CODEPEN!! Here is a link to the codepen Also this is still a work in progress, there are a couple of other bugs I'm working on, for example the the first turn the user makes will not light up or play the sound but the selection is pushed into the correct array and the game will proceed properly based on your selection. I know this is alot of info but I'm stuck on this so any feed back will be very appreciated. Thanks!