title: JQuery multiple flip panels with
body: <p>I'm trying to make multiple flip cards on one page. Each of the cards should activate when you click on a link inside. I do have this working. But when I make multiple "cards" it flips all of them. I've gone through the event handler structure but I am obviously way over my head. Any help would be most appreciated!</p>
  
  <p>This is the example I am basing this work off of:</p>
  
  <p><a href="http://css3playground.com/flip-card.php" rel="nofollow">http://css3playground.com/flip-card.php</a></p>
  
  <p>Here is the JS:</p>
  
  <pre><code>    $(document).ready(function(){
          $('.card .action-front').click(function(e){
              $('.card').addClass('flip');
              e.preventDefault();
          });
          $('.card .action-back').click(function(e){
              $('.card').removeClass('flip');
              e.preventDefault();
          });
  
      });
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>    .panel {
          float: left;
          width: 200px;
          height: 200px;
          margin: 20px;
          position: relative;
          font-size: .8em;
  
          -webkit-perspective: 600px;
          -moz-perspective: 600px;
      }
  
      .panel .front {
          float: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 900;
          width: inherit;
          height: inherit;
          border: 1px solid #ccc;
          background: #fff;
          text-align: center;
  
          -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
          -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
          box-shadow: 0 1px 5px rgba(0,0,0,0.9);
  
          -webkit-transform: rotateX(0deg) rotateY(0deg);
          -webkit-transform-style: preserve-3d;
          -webkit-backface-visibility: hidden;
  
          -moz-transform: rotateX(0deg) rotateY(0deg);
          -moz-transform-style: preserve-3d;
          -moz-backface-visibility: hidden;
  
          /* -- transition is the magic sauce for animation -- */
          -o-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
          -moz-transition: all .4s ease-in-out;
          -webkit-transition: all .4s ease-in-out;
          transition: all .4s ease-in-out;
      }
      .panel.flip .front {
          z-index: 900;
          border-color: #eee;
          background: #fff;
  
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
  
          -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
          box-shadow: 0 15px 50px rgba(0,0,0,0.2);
      }
  
      .panel .back {
          float: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 800;
          width: inherit;
          height: inherit;
          border: 1px solid #ccc;
          background: #fff;
          text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
  
          -webkit-transform: rotateY(-180deg);
          -webkit-transform-style: preserve-3d;
          -webkit-backface-visibility: hidden;
  
          -moz-transform: rotateY(-180deg);
          -moz-transform-style: preserve-3d;
          -moz-backface-visibility: hidden;
  
          /* -- transition is the magic sauce for animation -- */
          -o-transition: all .4s ease-in-out;
          -ms-transition: all .4s ease-in-out;
          -moz-transition: all .4s ease-in-out;
          -webkit-transition: all .4s ease-in-out;
          transition: all .4s ease-in-out;
      }
  
      .panel.flip .back {
          z-index: 1000;
          background: #fff;
  
          -webkit-transform: rotateX(0deg) rotateY(0deg);
          -moz-transform: rotateX(0deg) rotateY(0deg);
  
          box-shadow: 0 15px 50px rgba(0,0,0,0.2);
          -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
      }
  
  .card {
    width: 290px;
    height: 240px;
  }
  
      .panel .pad {padding: 0 15px; }
      .panel.flip .action-front {display: none; }
      .block ol li {text-align: left; margin: 0 0 0 28px; }
      .block .action-front {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
      .block:hover .action-front {opacity: .7; }
      .circle div {border-radius: 100px; }
      .circle div h2 {padding-top: 3em; text-align: center; }
  </code></pre>
  
  <p>Here is the fiddle fiddle: <a href="http://jsfiddle.net/5AWSJ/2/" rel="nofollow">http://jsfiddle.net/5AWSJ/2/</a></p>