Coundown Timer Inside ForEach Loop Php

Question

I am trying to Show a Countdown Timer Inside Foreach loop for every record in PHP Codeigniter Framework, It is basically showing Datediff between current date and mysql database date value as how many days left, Below is my code.Problem is it is showing countdown timer for single record only not for every record i need

 <?php foreach ($my_courses as $my_course):
     $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
 
     <!-- countdown timer-->
                             
     <?php if ($course_details['is_onlineclass']==='Yes'): ?>
     <span style="display:inline-block;font-size:12px;font-color:crimson;"><?php 
     $t=$course_details['live_class_schedule_time'];
                                   
     //time difference in seconds for coundown timer
     $date = new DateTime();
     $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
     $diff = $date->getTimestamp() - $date2->getTimestamp() ;
     echo $diff;                                      
     ?></span>
                                  
     <span  id="<?echo $my_course['course_id']?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
     <?php endif; ?>
                                 
     <script>
         var initialTime = <?echo $diff?>;

         var seconds = initialTime;
         function timer() {
         var days        = Math.floor(seconds/24/60/60);
         var hoursLeft   = Math.floor((seconds) - (days*86400));
         var hours       = Math.floor(hoursLeft/3600);
         var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
         var minutes     = Math.floor(minutesLeft/60);
         var remainingSeconds = seconds % 60;
         if (remainingSeconds < 10) {
         remainingSeconds = "0" + remainingSeconds; 
         }
         document.getElementById('<?echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
         if (seconds == 0) {
              learInterval(countdownTimer);
              document.getElementById('<?echo $my_course['course_id']?>').innerHTML = "Completed";
         } else {
           seconds--;
                }
         }
            var countdownTimer = setInterval('timer()', 1000);
                                      
         </script>
   

What is the wrong I am doing and How to show the timer for every record

Answer 1

Your function name and call should also be unique.

EDIT

Also you messed up a log of code. I have commented the foreach loop and put my own for loop. Modify accordingly

Try this.

<?php 


$my_course['course_id'] = 0;

for($i = 0; $i <= 2; $i++):
// foreach ($my_courses as $my_course):
// $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();

// You need to comment this out when you put your code live
$course_details['is_onlineclass'] = "Yes"; 
$course_details['live_class_schedule_time'] = time() + rand(0, 300); 
$my_course['course_id'] += 1;
// remove till here

if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endfor; ?>

EDIT: Here is your code

<?php 

foreach ($my_courses as $my_course):
$course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();


if ($course_details['is_onlineclass']==='Yes'):
?>
    <span style="display:inline-block;font-size:12px;font-color:crimson;">
    <?php 
        $t=$course_details['live_class_schedule_time'];
                                    
        //time difference in seconds for coundown timer
        $date = new DateTime();
        $date2 = new DateTime(date("yy-m-d h:i:s a", $t));  
        $diff = $date->getTimestamp() - $date2->getTimestamp() ;
    ?>
    </span>
                                
    <span  id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>                                     
<?php endif; ?>
                            
<script>
    var initialTime = <?php echo $diff; ?>

    var seconds = initialTime;
    function timer<?php echo $my_course['course_id'];?>() {
        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
        if (seconds == 0) {
            learInterval(countdownTimer);
            document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
                                
    </script>
<?php endforeach; ?>