How to Separate each Card from simultaneously flipping back together

Question

Hello I created an events card that rotates when you click/hover the card and rotates back when you click the arrow left icon at the back. The action is okay but when I click on the next card the previous card is still rotating . I just need to separate the actions on each of the card, since when you click one card the action seems to follow on the other cards. https://jsfiddle.net/89c76wpx/

This is the html structure of each of the card, to distinguish each of the card I added an id=card1 id=card2 etc.

<div class="card col">
      <input type="checkbox" id="card1" class="more" aria-hidden="true">  
        <div class="content">

           <div class="front" style="background-image: url('https://cdn2.hubspot.net/hubfs/1943696/Tile%20Event%20Pictures/800px_chicago_skylin_N5DSy.jpg')">
                <div class="inner">
                    <h2>Chicago Events</h2>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <label for="card1" class="button" aria-hidden="true">
                      Discover
                    </label>
                </div>
            </div>

            <div class="back">
                <div class="inner">
                    <div class="info">
                         <!-- <i class="fa fa-calendar"></i> -->
                        <span>Month</span>
                        <div class="icon">


                        </div>
                    </div>
                    <div class="info">
                        <span>Event Type</span>
                        <div class="icon">
                            <!-- <i class="fa fa-door-open"></i> -->

                        </div>
                    </div>
                    <div class="info">
                       <!--  <span>Event</span> -->
                        <div class="icon">
                           <!--  <i class="fa fa-bed"></i>
                             -->
                        </div>
                    </div>

                    <div class="description">
                        <ul>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Sep</span> Fall Whiskey</a> </li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Oct</span> Halloween Bar Crawl Fri & Sat </a> </li>
                        <li  class="btn draw-border"><a href="" target="_blank"> <span>Dec</span> NYE Bar Crawl </a></li>
                        <li  class="btn draw-border"><a href="" target="_blank"> <span>Dec</span> NYE Yacht </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jan</span> Winter Whiskey </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Feb</span> Winter Tequila </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Mar</span> St Patrick's Bar Crawl </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jun</span> Summer Whiskey </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jul</span> Summer Tequila </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Aug</span> Air Show Yacht Party </a> </li>
                        </ul>

                    </div>
                    <div class="location">Chicago Events </div>
                    <div class="price">2019-2020</div>
                    <label for="card1" class="button return" aria-hidden="true">
                        <i class="fa fa-arrow-left"></i>
                    </label>
                </div>
            </div>

        </div>
    </div> 

    $(".return").click(function(e){
    $(".card").addClass("myclass");
    });
   $(".return").mouseout(function(e){
    $(".card").removeClass("myclass");
    })

Answer 1

$(function () {
    $(".return").data('clicked', false);

    $(".return").click(function (e) {
        $(this).data('clicked', !$(this).data('clicked'));
        ////$(this).closest(".card").toggleClass("myclass", $(this).data('clicked')==true);

        if ($(this).data('clicked') == true) {
            $(this).closest(".card").addClass("myclass");
        } else {
            $(this).closest(".card").removeClass("myclass");
        }
    });

    $(".return").mouseout(function (e) {
        if ($(this).data('clicked') != true) {
            $(this).closest(".card").removeClass("myclass");
        }
    })
});

Sample Demo

//===========================================//

$(".return").click(function(e){
    $(this).closest(".card").addClass("myclass");
});

//Or

$(".return").click(function(e){
    $(this).parents(".card").addClass("myclass");
});

Answer 2

You need to reference this here:

$(".return").mouseout(function(e){
    $(this).closest(".card").removeClass("myclass");
})

This way you're telling jQuery to find the closest parent with card class and remove myclass from it so this should fix the above error.