如何设置定时器在给定时间后自动从一个元素切换到另一个元素？

Question

I have created a sequence generator using php which is working perfectly and I have also created a javascript timer which sets the time and begins the countdown based on how many sequence user have requested to generate if user gave input of 6 question or sequence then timer will be set for 6 minutes, this is also working fine , Now I want to set the timer for each element in that sequence i.e the elements now generating one at atime and after clicking next button it switches to next element in that sequence but I want to do this with time .After some given time element should automatically be switched to next element.

here is my code where I am displaying sequence with timer

        <div class="timer" style= 'font-size: 25px;color:  #ffe6e6;'>Duration:
        <time id="countdown"><script> var seconds = <?php echo  $num_questions * 60; ?>;</script>

              <?php echo $num_questions; ?>
         </time>
       </div>

       <br><br><br><br><br><br>
 <?php
   }
}


     function output_slide($slide_data, $index=1) {
      $expression = $slide_data['expression'];
       $result = $slide_data['result'];
      ?>
    <div class="slide flex flex-justify-center flex-column" id="out">
    <h3 class="ta-center">Q(<?php echo $index+1 ?>)</h3><br><br>
            <div class="expression flex flex-center flex-row" id="exp">
        <?php foreach($expression as $item) { ?>
        <span class="slide-item"><?php echo $item ?></span><!--displaying each item at a time-->
           <?php } ?>
        <span class="slide-item"> = </span>
        <span class="slide-item">
            <span class="answer flex flex-center">
                <span class="answer-placeholder">
                   ****
                </span>
                <span class="answer-content"><!--displaying result-->
                    <?php echo $result; ?>
                </span>
            </span>
        </span>
    </div><br><br><br><br><br>
     <center><div class="dotin"><?php
        for ($j=0; $j<count($expression); $j++) {
            ?><a class="dots-cont" onclick="goToItem(<?php echo $j ?>)"></a><?php
        }
    ?></div></center>
</div>

This is my javascript code for timer , but this is working only for value of no.of questions or sequence user have entered in form .

 function secondPassed() 
                {
                   var minutes = Math.round((seconds - 30)/60),
                    remainingSeconds = seconds % 60;
                      if (remainingSeconds < 10) 
                        {
                           remainingSeconds = "0" + remainingSeconds;
                        }
                    document.getElementById("countdown").innerHTML = minutes + ":" + remainingSeconds;
                      if (seconds == 0) 
                         {
                           clearInterval(countdownTimer); 
                           window.location.href = 'http://localhost/final_generate/slideshow.php';
                         } 
                    else
                         {
                          seconds--;
                         }
               }

                 var countdownTimer = setInterval('secondPassed()', 1000);

Now I want to display each item of the expression or sequence automatically after some time based on user input for no.of question, How can I do it?