JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio"> 
  <ul> 
   <li><img src="images/4.jpg" alt="4" id="promo_one"></li> 
   <li><img src="images/1.jpg" alt="1" id="promo_two"></li> 
   <li><img src="images/2.jpg" alt="2" id="promo_three"></li> 
   <li><img src="images/3.jpg" alt="3" id="promo_four"></li> 
  </ul> 
 </div>

CSS

#id {
    position:relative;
    top:50px;
}

JavaScript

var i=1;

 setInterval(function() {
  $(".portfolio ul li:nth-child("+i+")").click();
  if (i<4) {i++;} else {i=1;}

 }, 1000);
$('li').click(function() {
    $('body').append($(this).index() + '<br>');
})