Trying to get multiple timers to work on single page
<p>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. </p>

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

<p>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. </p>

<p>Here's what the code looks like from within the .js file:</p>

<pre><code> document.getElementById('minutes').innerHTML = padNums(minutes, 2);
 document.getElementById('seconds').innerHTML = padNums(seconds, 2);
 document.getElementById('milliseconds').innerHTML = padNums(milliseconds, 3);   
</code></pre>

<p>The script from within the HTML file:</p>

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

<p>And the HTML:</p>

<pre><code>  &lt;div class="wrapper"&gt;
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt;
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt; 
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt; 
  &lt;/div&gt;  
</code></pre>

<p>..........</p>

<p>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. </p>

<p>What else can I try?</p>

<p>Thanks</p>

<hr>

<p>Here's another set of code I've tried as suggested from below:</p>

<p>Inside the html page:</p>

<pre><code> &lt;div class="wrapper"&gt;
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt;
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt; 
    &lt;p&gt; There is this much time left: &lt;span class="counter"&gt; &lt;/span&gt; &lt;/p&gt; 
  &lt;/div&gt;

  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;

  $('.counter').html('&lt;span class="minutes"&gt;0&lt;/span&gt;' + ':' + '&lt;span     
  class="seconds"&gt;0&lt;/span&gt;' + ':' + '&lt;span class="milliseconds"&gt;0&lt;/span&gt;' );


  &lt;/script&gt;    
</code></pre>

<p>And within the .js:</p>

<pre><code> $('.minutes').innerHTML = padNums(minutes, 2);
 $('.seconds').innerHTML = padNums(seconds, 2);
 $('.milliseconds').innerHTML = padNums(milliseconds, 3); 
</code></pre>

<p>Although... this doesn't work either.    </p>

<hr>

<p>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.    </p>
