Trying to get multiple timers to work on single page

Question

I've got a single page that I need a timer to show up again and again on as the user continues to read further down the page.

It's the same timer, it just counts down for a set period of time.

I've got the timer working perfectly in the first content span only, however it won't display in all the other elements I've specified.

Here's what the code looks like from within the .js file:

 document.getElementById('minutes').innerHTML = padNums(minutes, 2);
 document.getElementById('seconds').innerHTML = padNums(seconds, 2);
 document.getElementById('milliseconds').innerHTML = padNums(milliseconds, 3);   

The script from within the HTML file:

 $('.counter').html('<span id="minutes">0</span>' + ':' + '<span id="seconds">0</span>' + ':' + '<span id="milliseconds">0</span>' );  

And the HTML:

  <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>  

..........

I've tried changing the .js methods to getElementsByClass and changing the spans to classes instead of id's. and that stopped even the first countdown from working.

What else can I try?

Thanks

---

Here's another set of code I've tried as suggested from below:

Inside the html page:

 <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
  <script type="text/javascript">

  $('.counter').html('<span class="minutes">0</span>' + ':' + '<span     
  class="seconds">0</span>' + ':' + '<span class="milliseconds">0</span>' );


  </script>    

And within the .js:

 $('.minutes').innerHTML = padNums(minutes, 2);
 $('.seconds').innerHTML = padNums(seconds, 2);
 $('.milliseconds').innerHTML = padNums(milliseconds, 3); 

Although... this doesn't work either.

---

The easiest way for me to accomplish this would be to create more sets of unique ids for each timer but I want a more elegant way of doing this.

Answer 1

Try using classes for spans #minutes, #seconds and #milliseconds instead of IDs.

You will then have to replace the three

document.getElementById('minutes') ... 

with

$('.minutes') ...

---

Just saw your edit.

You will need to use

$('.minutes').html('...')

in the same way you did with

$('.counter').html('...')

Answer 2

For php I made this class to handle situations like that:

class IDDateTime {

    static function SecToTime($sec) {
        $days = floor($sec / 86400);
            $sec = $sec - ($days * 86400);
        $hours = floor($sec / 3600);
            $sec = $sec - ($hours * 3600);
        $minutes = floor($sec / 60);
            $sec = $sec - ($minutes * 60);
        $seconds = $sec;

        if($days > 0) $days= $days.' days'; else $days='';
        if ($minutes < 10) $minutes= '0'.$minutes;
        if ($seconds < 10) $seconds= '0'.$seconds;

        return $days.$hours.':'.$minutes.':'.$seconds;
    }

    static function ShowTimer($id,$sec,$href='',$extrasec=false) {
        return '<span id="'.$id.'">'.IDDateTime::SecToTime($sec).'</span><script type="text/javascript">updateTime("'.$id.'",'.($sec + ($extrasec?1:0)).',"'.$href.'");</script>';
    }

    static function AddTimerEngine($text='Done') {
        return '
        <script type="text/javascript">
        function updateTime(elementId,time,rdr) {
            var bt_obj = document.getElementById(elementId); 
            time--;
            var timeToEnd = time; 
            temp = timeToEnd;
            if(temp >= 0) { 
                days = Math.floor(temp / 86400);
                temp = temp % 86400;
                hours = Math.floor(temp / 3600);
                temp = temp % 3600; minutes = Math.floor(temp / 60);
                temp = temp % 60; output = "";
                seconds = temp;                
                if(days > 0) output = days + "days. "; 
                if(seconds < 10) seconds = "0" + seconds; 
                if(minutes < 10) minutes = "0" + minutes; 
                bt_obj.innerHTML = "<b>"+output+hours+":"+minutes+":"+seconds+"</b>"; 
                var jsExp = "updateTime(\'" + elementId + "\'," + time +",\'"+ rdr + "\')";
                setTimeout(jsExp , 1000); 
            } else {
                bt_obj.innerHTML = "'.$text.'";
                if(rdr != \'\') {
                    window.location.href = rdr;
                }
            }
        };
        </script>';
    }

}

To use it just add it to your page like that:

Echo IDDateTime::ShowTimer('yout_timer_id',$seconds);
Echo IDDateTime::ShowTimer('another_timer',$seconds);

You can take some parts of the code and adapt to your situation, or use it as is.