JSFiddle - React, Tailwind, and code Playground

by toster

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tasks-wrapper">
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
  <div class="task-item">xxx</div>
</div>

JavaScript

jQuery(function($) {
	$(document).on('item-shown', '.task-item', function() {
    var _this = $(this);
    var tm = 5;
    setTimeout(function(){
      var timerInterval = setInterval(function() {
        tm--;            
        _this.text('0'+tm);
        if (tm == 0) {                               
          clearInterval(timerInterval);
        }
      }, 1000);    
    }, 1000);            
  });

   setTimeout(function(){
     $('.tasks-wrapper').find('.task-item').first().trigger('item-shown'); 
   },100);  
});