Rotate card back onclick GSAP

Question

I have a project that has flip cards which I had working great until I looked in IE (10, and 11). I understand transform-style: preserve-3d; is not supported in IE so I have decided to go another route. I stumbled across a fix using GSAP and a codepen example that works in IE. My issue is I want it to rotate back and forth on click and not hover. Not having much GSAP experience is there a way to reverse the animation on click?

UPDATED QUESTION: I'd like to fire the animation on click of "button" in cards not on the whole container. I've set it up but the only issue is it's flipping ALL the cards instead of just one like I want

HTML:

   <div id="mainWrap">
        <div class="cardCont">
            <div class="cardBack">Back</div>
            <div class="cardFront">Front</div>
        </div>
        <div class="cardCont">
            <div class="cardBack">Back</div>
            <div class="cardFront">Front</div>
        </div>
  </div>

GSAP:

  //Card flip animations
    TweenMax.set($($flipCardBack), {rotationY: -180});

    $.each($flipCardContainer, function (i, element) {
        var frontCard = $(this).find('.flip-card-front'),
            backCard = $(this).find('.flip-card-back'),
            tl = new TimelineMax({paused: true, reversed: true});
        tl
            .to(frontCard, 1, {rotationY: 180})
            .to(backCard, 1, {rotationY: 0}, 0)
            .to(element, .5, {z: 50}, 0)
            .to(element, .5, {z: 0}, .5);

        element.animation = tl;

        $('.flip-card__toggle').on('click', function () {
            if (tl.progress() === 0
                || tl.reversed()) {
                tl.play();
            } else {
                tl.reverse();
            }
        });
    });

Answer 1

Sure, this is easy using GSAP's .reverse() method:

$('.cardCont').on('click', function elOver() {
    // If the animation hasn't been ran or it's been reversed
    if(this.animation.progress() === 0
    || this.animation.reversed()) {
        this.animation.play();
    } else { // If it has been played forwards
        this.animation.reverse();
    }
});

Generally speaking it's good to post a minimal, complete, verifiable example of your issue so that we can debug code like this and show you it working.