turn a div using jQuery to display another one

im trying to turn a div and than display another div i used javascript and it works but i want to apply it to more than 1 group of divs so i would like to work with classes and not id's.

var init = function() {
    var card = document.getElementById('card');

    document.getElementById('flip').addEventListener( 'click', function() {
        card.toggleClassName('flipped');
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

var init = function() {
    var card = document.getElementById('card');

    document.getElementById('flipback').addEventListener( 'click', function() {
        card.toggleClassName('flipped');
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

	<section class="container">
  		<div id="card">
		    <figure class="front" id="flip"></figure>
		    <figure class="back" id="flipback">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
 		 </div>
	</section>