Multiple countdown on one page

Question

Below is the html code for the countdown. I am using jquery.countdown.min.js plugin.

<ul id="example"> <li><span class="days">00</span><p class="days_text">Days</p></li> <li class="seperator">:</li> <li><span class="hours">00</span><p class="hours_text">Hours</p></li> <li class="seperator">:</li> <li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li> <li class="seperator">:</li> <li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li> </ul> <div id= "count" data-text="01/01/2016 05:06:59"></div> 

and here is the javascript code.

 <script type="text/javascript"> var val1 = $('#count').data('text'); $('#example').countdown({ date: val1, offset: 0, day: 'Day', days: 'Days' }, function () { alert('Done!'); }); </script> 

It works great and gives me the desired result. Limitation: I can use only one countdown timer per page. If I want to use several on one page, then I need to add some javascript code.

The following is a script.

 <ul id="example"> <div data-countdown="01/01/2016 05:06:59"></div> <div data-countdown="01/01/2017"></div> <div data-countdown="01/01/2018"></div> <div data-countdown="01/01/2020"></div> </ul> 

I tried the code below, but it does not work.

 <script type="text/javascript"> $('[data-countdown]').each(function() { var $this = $(this),finalDate = $(this).data('countdown'); $this.countdown({ date: finalDate, offset: 0, day: 'Day', days: 'Days' }, function () { alert('Done!'); }); }); </script> 

Answer 1

Update:

Jsfiddle

  <div id="example1" data-countdown="01/01/2016 05:06:59"></div> <div id="example2" data-countdown="01/01/2017"></div> <div id="example3" data-countdown="01/01/2018"></div> <div id="example4" data-countdown="01/01/2020"></div> $(function(){ $('[data-countdown]').each(function() { var $this = $(this), finalDate = $(this).data('countdown'); $this.countdown(finalDate, function(event) { $this.html(event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() { alert("Finish"); }); }); }); 

Answer 2

Javascript and html are friends. When you find something strange in js code, check out the html first. In your case, if you stick with ul, use the ul-li-div structure; otherwise use "div-div" or "nav-div" or "section-div" if applicable