javascript - jQuery フリップ効果 / getElementById

Question

複数のウィジェットに使用したいフリップ効果を使用していますが、次の問題に苦労しています: 異なるウィジェットに同じベース HTML を使用しました。したがって、ページの最初のウィジェットを反転させたいときは、問題なく動作します。別のウィジェットを反転させたいのですが、まったく機能しません...

問題が私のスクリプトに関係していることに気付きました。を使用document.getElementByIdしたため、最初の一意の ID のみを認識します。しかし今は、異なるウィジェットごとに ID の名前を変更したくありません。複数のIDを定義できるように、スクリプトを書き直す方法はありますか?

HTML

<section class="widget span3">
   <!--front-->
   <div id="front" class="widget-1-2 flip">
      <div class="widget-header">
         <h2>Monthly Statistics</h2>
         <div class="btn-group pull-right">
            <button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button>
            <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button>
            <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button>
         </div>
      </div>
      <div class="widget-content"><p>This is the front.</p></div>
   </div><!--/front-->

   <!--back-->
   <div id="back" class="widget-1-2 flip">
      <div class="widget-header">
         <h2>Monthly Statistics / Settings</h2>
         <div class="btn-group pull-right">
            <button id="btn-back" class="btn"><i class="icon-signal icon-white" alt="charts"></i></button>
            <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button>
            <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button>
         </div>
      </div>
      <div class="widget-content"><p>This is the back.</p></div>
   </div><!--/back-->
</section><!--/widget-1-2-->

JavaScript

<script>
   document.getElementById( 'btn-front' ).addEventListener( 'click', function( event ) {
      event.preventDefault();
      document.getElementById( 'back' ).className = 'flip flip-front';
      document.getElementById( 'front' ).className = 'flip flip-back';
   }, false );

   document.getElementById( 'back' ).addEventListener( 'click', function( event ) {
      event.preventDefault();
      document.getElementById( 'back' ).className = 'flip';
      document.getElementById( 'front' ).className = 'flip';
   }, false );
</script>

回転/反転効果には CSS を使用します。少し早いですがお礼を！