adding a button to each card to flip

Question

So my basic idea is to add a button to each card which then flips the card and resets the previously flipped card. Now how do I make a button specific to each card which can flip/unflip the card and unflip the previously flipped card (when needed to)

I have this JSFiddle which I found in this question. I looked around the internet but couldn't find any solutions to this specific problem. It might be similar to this. Hope this could help :) something like this too maybe

$('.flip-container .flipper').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');

  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

Answer 1

It seems you just need to add a button and add it to the selector

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 250px;
  height: 250px;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.artist-1 {
  background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>

    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
      <button>Flip</button>
    </div>
    <div class="back">
      <p>You won</p>
    </div>

  </div>

</div>