I am trying to make a solitaire like game. When I click the cards (read: divs) that are stacked on the deck pile, the top card will turn and move to the left. This all works great. I am using the following code:

1. var z = 1;
2. $('#deck .card.flipped').on('click', function () {
3. if (!$(this).hasClass('dropped')) {
4. $('.card').removeClass('ui-front');
5. $(this)
6. .addClass('ui-front')
7. .addClass('on-discard-pile')
8. .addClass('dropped')
9. .css({'z-index': z++})
10. .animate({left: '8rem'}, 200)
11. .draggable({ disabled: false}) 
12. .removeClass('flipped');
13. 
    
14. if (!$(this).is(':first-child')) {
15. $('.card').removeClass('under-card');
16. $(this).next().addClass('under-card'); 
17. } else {
18. $('.card').removeClass('under-card');
19. }
20. }
21. });

Now I want not to turn 1 card from the deck when I click it, but the top 3 cards. Also the first top card will move 8rem to the left (using  .animate({left: '8rem'}, 200) ) but the second card should move 10rem to the left en the third and last card 12rem

How can I do this?

I have tried :lt() and stuff but can't get it working

See my fiddle:  http://jsfiddle.net/hy2dvL1u/35/