javascript - 最後のアイテムでのみ起動するのではなく、コレクション内の各アイテムで TransitionEnd を機能させるにはどうすればよいですか?

Question

要素を (クラスを追加して) 遷移させ、その遷移の完了時に (クラスを削除して) 復元する必要があります。これは機能しますが、コレクションの最後の要素に対してのみです (いくつあっても)。最後の要素だけでなく、各要素で transitionEnd を起動するにはどうすればよいですか?

.on('webkitTransitionEnd... の代わりにさまざまなタイムアウトなどを試しました...これまでのところ何も機能していません。

時間がかかりすぎるため、順番に発射することはできません。同時に発射する必要があるものは数十あります。

これをキューに入れる方法はありますか、それとも間違った方法でアプローチしていますか?

実際のアプリケーションでは、テキストが変更され、サイクル間で他のことが発生します。そのため、キーフレームを使用してテキストを下げ、待ってから元に戻すことができます。

事前に感謝します。この質問を別の方法で投稿/表現する必要があるかどうかをお知らせください。

$(document).on("click", "#one", function(e) {
  flipEach()
});


function flipEach(){ 
  // itterate through an array of same-class elements and execute on each
  $(".card").each(function( index ) { 
    // use the index to itterate through the IDs
    position = "#pos_"+(index+1)
    // add the transition class to current item in the each/array
    $( position ).addClass('flipped')
    // change text and remove item on the current item in the each/array after transitionEnd
    $( position ).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
      function(e) {
      // remove the class that flipped it and restore position
      $( position ).removeClass("flipped");  
    });  
});  
};

body {
  display:flex;
  align-items: center;
  text-align: center;
}

.card {
  width:80px;
  height:120px;
  margin:10px;
  font-size:50px;
  text-align:center;
  background-color: gray;
  transform-origin: 0% 100%;
}

.flipped{
  transform: rotateX(-180deg); 
  transition-property: transform;
  transition-duration: 1s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="one">fipEach</button>

<div id="pos_1" class="card">1</div>
<div id="pos_2" class="card">2</div>
<div id="pos_3" class="card">3</div>
<div id="pos_4" class="card">4</div>