var setSize = 4;
var cardCount = $(".cards-container span").length;
var currentSet = 1;
var totalSets = Math.ceil(cardCount / setSize);

for (i = 0; i < currentSet * setSize; i++){
    console.log("card-" + (i + 1));
    $("#card-" + (i + 1)).addClass("d-none");
}

$("#rightArrow").click(function(){
    console.log("Right arrow clicked");
    if(currentSet < totalSets){
        var firstVisible = currentSet * setSize - 4;
        currentSet++;
        var lastToBeVisible = currentSet * setSize;
        for (i = firstVisible; i < lastToBeVisible; i++){
            console.log("card-" + (i + 1));
            $("#card-" + (i + 1)).toggleClass("d-none");
            $("#card-" + (i + 1)).animate({
                left: "100%"
            }, 800);
        }
    }
});