JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons"> 
         <a href="#" id="next" style="background:#000;width:100px;height:100px;display:block">asdasdasdadsd</a> 
</div> 
<div id="container" class="thirdcanvas">
      
       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>
       
       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     
           
       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 
           
       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  
           
       <div id="umbrela">   
  ...

CSS

.buttons 
{
margin-left:1525px;
margin-right:auto;
margin-top: 810px;
}

.secondcanvas
{
    position: fixed;
    left: 260px;
    top: 100px;
}
.thirdcanvas
{
    position: fixed;
    left: 130px;
    top: 480px;
    border: 1px solid;
    color: #FF0000;
    width: 705px;
    height: 90px;
    padding-left: 10px;
    padding-top: 15px;
}


.hidden
{
    display:none;
}
img{display:block;background:#000;width:20px;height:20px;}

JavaScript

$(document).ready( function(){ 
   $("#container div").addClass('hidden');
   $("#container div").first().removeClass('hidden').addClass('active');
   $("#next").click(function(){
       
       var divWithoutHiddenClass = $("#container div.active");
       
       
    
       divWithoutHiddenClass.removeClass('active').addClass('hidden');
         
       if(divWithoutHiddenClass.next().length===0){
           $("#container div:first").removeClass('hidden').addClass('active');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden').addClass('active');
    }
});

});