I need to click two times to add class to an element

I’m trying to create a Simon Game and when the user click the button I want it to be animated.

I used addClass and setTimeOut with removeClass, the animation happens but I need to click the same button two times.

var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];

function playSound(name) {

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

}

function nextSequence() {

    var randomNumber = Math.floor(Math.random() * 4);

    var randomChosenColour = buttonColours[randomNumber];

    gamePattern.push(randomChosenColour);

    $("#" + randomChosenColour).fadeOut(100).fadeIn(100);

    playSound(randomChosenColour);

}

function animatePress(currentColour) {

    $("." + currentColour).on("click", function () {

        $("." + currentColour).addClass("pressed");

        setTimeout(function () {

            $("." + currentColour).removeClass("pressed");

        }, 100);

    })

}

$(".btn").on("click", function () {

    var userChosenColour = this.id;

    userClickedPattern.push(userChosenColour);

    playSound(userChosenColour);

    animatePress(userChosenColour);

})