JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://lh4.ggpht.com/FUWsXiCVl9xt1bxfdtZk7QgMQpbui_uxv7qONujjFMrf-B-aU0N4gPJ9qY5hoBsoTuo=w300" id="cover" height="100" width="100">
  <img src="http://1389blog.com/pix/happy-cat-wallpaper-thumbnail.jpg" id="1" style="display:none;" height="100" width="100">
  <img src="https://prime.peta.org/wp-content/uploads/2009/03/cateyes.thumbnail.jpg" id="2" style="display:none;" height="100" width="100">
   <img src="https://lh5.ggpht.com/z-HSdeRxdeE5ExB6VliQiKpi7o5VWQ3xpbXfs_8Q8rFO8O7sF52hGEhLNYTG7un_nw=h310" id="3" style="display:none;" height="100" width="100">
</div>
<div>
  <button id="cycle">
    Click Me to cycle stuff!
  </button>
</div>

JavaScript

$(function() {
	var arrayOfCats = [
  	$("#1"),
    $("#2"),
    $("#3")
  ];
	$("#cycle").click(progressImage);
  
  function progressImage() {
  	$("#cycle").prop("disabled", "disabled");
    $("#cover").toggle();
		for (var x = 0; x < arrayOfCats.length; x++) {
    	delay = x * 3000;
      (function(x, delay){ 
          setTimeout(function() {
            if (x > 0)
              arrayOfCats[x - 1].toggle();
            arrayOfCats[x].toggle();
            if (x === arrayOfCats.length - 1) {
            	(function(x, delay){
              		setTimeout(function() {
                      arrayOfCats[x].toggle();
                      $("#cycle").prop("disabled", "");	
                      $("#cover").toggle();
                  }, delay)
              })(x, 3000);
            }
          }, delay);
     	})(x, delay);    
    }
  }
})