Html 折叠图标的切换动画仅适用于一次折叠（boostrap）

我正在进行自定义折叠，但仅在其中一个折叠时有效。我做错了什么

HTML

切换动画折叠（引导）：-

<button class="btn btn-block text-left" id="toggler-btn" type="button" data-toggle="collapse" data-target="#temporada1"
      aria-expanded="true" aria-controls="temporada1">
    <span id="clpse-icon" class="fas fa-arrow-down fa-arrow-down-animated"></span>
</button>

$(document).ready(function () {
  $('#toggler-btn').on('click', function(){  
    $('#clpse-icon').toggleClass( "fa-chevron-down-animated" );
  });
});