Fixed fiddle

fixed the bug

HTML

<div id='explanation_area'>
<ul>
    <li>There are five card options for the first token.</li>
    <li class="expl 2">For <b>each</b> of the previous possibilities, we have five options for the second token. So we multipy the number of previous possible arrangements by five.</li>
    <li class="expl 3">Again, for <b>each</b> of the previous possibilities we have two options for the third token. So we multipey the number of previous possible arrangements by five.</li>
    <li class="expl 4">Again, for <b>each</b> of the previous possibilities we have two options for the third token. So we multipey the number of previous possible arrangements by five.</li>
    <li class="expl 5">Again, for <b>each</b> of the previous possibilities we have two options for the third token. So we multipey the number of previous possible arrangements by five.</li>
    <li class="expl 6">Finally we have a total of 5^5 total possible outcomes: one of which was chosen by you!</li>
</ul>
</div>
<div id="card_area">
    <div class="first">
        <p class="ghost 1"></p>
        <p class="ghost 2"></p>
        <p class="ghost 3"></p>
        <p class="ghost 4"></p>
        <p class="ghost 5"></p>
        <p class="name">Card 1</p>
    </div>
    <div class="second">
        <p class="ghost 1"></p>
        <p class="ghost 2"></p>
        <p class="ghost 3"></p>
        <p class="ghost 4"></p>
        <p class="ghost 5"></p>
        <p class="name">Card 2</p>
    </div>
    <div class="third">
        <p class="ghost 1"></p>
        <p class="ghost 2"></p>
        <p class="ghost 3"></p>
        <p class="ghost 4"></p>
        <p class="ghost 5"></p>
        <p class="name">Card 3</p>
    </div>
    <div class="fourth">
        <p class="ghost 1"></p>
        <p class="ghost 2"></p>
        <p class="ghost 3"></p>
        <p class="ghost 4"></p>
        <p class="ghost 5"></p>
        <p class="name">Card 4</p>
    </div>
    <div class="fifth">
        <p class="ghost 1"></p>
        <p...

CSS

#card_area {
    width: 501px;
    margin-left: auto;
    margin-right: auto;
}
#explanation_area {
    width: 100px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    float: right;
}
#card_area div {
    height: 250px;
    width: 75px;
    border: 3px solid black;
    display: inline-block;
}
.second, .third, .fourth, .fifth {
    margin-left: 20px;
}
.ghost {
    margin-left: auto;
    margin-right: auto;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    border: 3px dotted black;
}
.name {
    margin-top: 5px;
}
#token_area {
    clear: both;
    width: 266px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
#token_area div {
    display: inline-block;
}
.token {
    height: 44px;
    width: 44px;
    border: 3px solid black;
    border-radius: 50%;
    margin-left: 0px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.token p {
    font-size: 25px;
    position: inherit;
    top: 15%;
}
#number_area {
    height: 30px;
    width: 500px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
}
.fading {
    width: 8%;
    float: left;
    color: #cc66ff;
}
ul {
    list-style-type: circle;
    font-size: 20px;
    width: 550px;
    margin-left: auto;
    margin-right: auto;
}
li {
    float: left;
    margin-top: 5px;
}
.hover {
    background-color: #cc66ff;
}

JavaScript

$(document).ready(function () {

    //Renaming tokens, ghost tokens, the equation, and the explanation. This will help with enabling and disabling the droppable and draggable features and hiding certain parts of the equation and explanation. Also, i will be the variable name for my counter that will later be used in the switch function.

    var ghost1 = $('.ghost.1');
    var ghost2 = $('.ghost.2');
    var ghost3 = $('.ghost.3');
    var ghost4 = $('.ghost.4');
    var ghost5 = $('.ghost.5');

    var token1 = $('.token.1');
    var token2 = $('.token.2');
    var token3 = $('.token.3');
    var token4 = $('.token.4');
    var token5 = $('.token.5');

    var fading1 = $('.fading.1');
    var fading2 = $('.fading.2');
    var fading3 = $('.fading.3');
    var fading4 = $('.fading.4');
    var fading5 = $('.fading.5');
    var fading6 = $('.fading.6');

    var expl2 = $('.expl.2');
    var expl3 = $('.expl.3');
    var expl4 = $('.expl.4');
    var expl5 = $('.expl.5');
    var expl6 = $('.expl.6');

    //Start the counter at 0
    var i = 0;

    //Making the ghost tokens droppable and hiding certain parts of the equation and explanation.
    $('.ghost').droppable({
        drop: function (event, ui) {
            i++;
            do_everything(i);
            $(ui).appendTo(this);
        },
        hoverClass: 'hover'
    });

    $('.fading').css('visibility', 'hidden');

    $('.expl').css('visibility', 'hidden');

    //This is the function that makes everything happen. It tells the computer which tokens are draggable, which ghost tokens are droppable and visible, and which parts of the equation and explanation should be visible. 

    //gets the ball rolling

    do_everything(0);

    function do_everything(n) {
        switch (n) {
            case 0:
                ghost1.css('visibility', 'hidden').droppable('disable');
                ghost2.css('visibility', 'hidden').droppable('disable');
                ghost3.css('visibility',...