.onclick turn 3 cards (divs) instead of 1 Solitaire (Klondike)

https://forum.jquery.com/topic/onclick-turn-3-cards-divs-instead-of-1#14737000006519136

by Akram kamal

HTML

<div id="playArea">
    <div id="playAreaHeader">
        <div id="deck"></div>
        <div class="no-cards"></div>
        <div class="discard"></div>
    </div>
    <div id="template" class="card drop-area flip-container flipped">
        <div class="flipper">
            <div class="front">
                <div class="top">
                    <div class="number"></div>
                    <div class="suit"></div>
                </div>
                <div class="bottom">
                    <div class="suit"></div>
                    <div class="number"></div>
                </div>
            </div>
            <div class="back"></div>
        </div>
    </div>

CSS

html {
    color: #333;
    font-size: 7px;
    line-height: 1;
}
@media (min-width: 480px) {
    html {
        font-size: 8px;
    }
}
@media (min-width: 580px) {
    html {
        font-size: 9px;
    }
}
@media (min-width: 680px) {
    html {
        font-size: 10px;
    }
}
@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}
@media (min-width: 880px) {
    html {
        font-size: 12px;
    }
}
@media (min-width: 980px) {
    html {
        font-size: 13px;
    }
}
@media (min-width: 1080px) {
    html {
        font-size: 14px;
    }
}
@media (min-width: 1180px) {
    html {
        font-size: 15px;
    }
}
@media (min-width: 1280px) {
    html {
        font-size: 16px;
    }
}
@media (min-width: 1380px) {
    html {
        font-size: 17px;
    }
}
body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8fc400+0,8fc400+100;Green+Flat+%236 */
    background: #8fc400;
    /* Old browsers */
    background: -moz-linear-gradient(top, #8fc400 0%, #8fc400 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8fc400), color-stop(100%, #8fc400));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8fc400 0%, #8fc400 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8fc400 0%, #8fc400 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #8fc400 0%, #8fc400 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #8fc400 0%, #8fc400 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc400', endColorstr='#8fc400', GradientType=0);
    /* IE6-9 */
    margin: 0;
}
header {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 10px
}
#menu {
    margin-left: -6px;
}
#menu a {
    background: #fff;
    border-radius: 2px;
    color: #8fc400;
    padding: 5px 10px;
   ...

JavaScript

$(function () {

    function main() {

        var set = function (obj, newVal) {
            obj.value = newVal;

            $('#moves').text(newVal);
        };

        var discardPilePosX = '8rem';

        var red = [1, 3],
            suits = '♥♠♦♣',
            numbers = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K'],
            cardIsRed,
            underCardIsRed;

        function buildDeck() {
            var deck = [],
                i = 1,
                j,
                k = 1;

            // For each of the 4 suits
            for (; i <= 4; i++) {
                // 13 cards per suit
                for (j = 1; j <= 13; j++) {
                    // [id, number, suit]
                    deck.push([k, j, i]);
                    k++;
                }
            }

            return deck;
        }

        //randomize-shuffle-a-javascript-array
        function shuffle(arr) {
            var currentIndex = arr.length,
                temporaryValue, randomIndex;

            // While there remain elements to shuffle...
            while (0 !== currentIndex) {

                // Pick a remaining element...
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;

                // And swap it with the current element.
                temporaryValue = arr[currentIndex];
                arr[currentIndex] = arr[randomIndex];
                arr[randomIndex] = temporaryValue;
            }

            return arr;
        }

        function buildDOMDeck(arr) {
            var $docFrag = $(document.createDocumentFragment()),
                $card;
            for (var i = 0; i < 52; i++) {
                $card = $('#template').clone();
                $card.attr('data-number', arr[i][1])
                    .attr('data-suit', arr[i][2])
                    .attr('id', 52 - i)
                    .find('.number').text(numbers[arr[i][1] - 1]);
               ...