How To Create Multiple CountDown Timers In The Same Page Using Javascript?

Question

I've been trying to get this piece of code to work successfully without any luck. Im trying to create a javascript function that will countdown multiple dates on the same page. My JavaScript function is as followed:

 <script>
   function getTimeRemaining(endtime){
     var deadline = new Date(endtime).getTime(); 
     var x = setInterval(function() { 
       var now = Math.floor(Date.now() / 1000); 
       var t = deadline - now; 
       var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
       var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
       var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 
       var seconds = Math.floor((t % (1000 * 60)) / 1000); 
       document.getElementById("trip_" + endtime).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s"; 
       if (t < 0) { 
           clearInterval(x); 
           document.getElementById("trip_" + endtime).innerHTML = "expired"; 
       } 
     }, 1);
   }
 </script>

the end time is provided as a unix timestamp. If the time has expired it displays it correctly. But if time is remaining it displays 0d0h0m0s without any updates. Just for fun, I added the t variable to the end of the countdown and it counts downs the remaining seconds but doesn't show it on the countdown itself. Im guessing there is something wrong with my days, hours, minutes, and seconds variables. I am not using milliseconds and I think the math im using is assuming I do. Does anyone know what I could do to solve my problem? Im not to well versed with javascript. Thanks in advance!

Answer 1

Maybe like this:

function TimeRemaining(){
   var els = document.querySelectorAll('[id^="trip_"]');
   for (var i=0; i<els.length; i++) {
   	 var el_id = els[i].getAttribute('id');
   	 var end_time = el_id.split('_')[1];
   	 var deadline = new Date(end_time);
     var now = new Date();
     var t = Math.floor(deadline.getTime() - now.getTime());
     var days = Math.floor(t / (1000 * 60 * 60 * 24));
     var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
     var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
     var seconds = Math.floor((t % (1000 * 60)) / 1000);
     if (t < 0) {
        document.getElementById("trip_" + end_time).innerHTML = 'EXPIRED';
     }else{
     	document.getElementById("trip_" + end_time).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
     }
   }
}

function StartTimeRemaining(){
    TimeRemaining();
	setInterval(function(){
		TimeRemaining();
	}, 1000)
}


StartTimeRemaining();

<div id="trip_2019-12-31"></div>
<div id="trip_2019-11-01 01:02:12"></div>
 <div id="trip_2019-01-01"></div>