title: HTML5/Javascript Progress multiple animated bars
body: <p>I've tried many things, but none of them turned out correctly...</p>
  
  <p>I am trying to animate an HTML5/Javascript Progress bar, and have multiple of these in one page. Also, I am trying to keep everything in one HTML file using <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> tags.</p>
  
  <p>Now, here's my problem: The bar part of the progress bar doesn't show up on any progress bars after the first one [<a href="http://jsfiddle.net/JonaK/S9PQr/3/" rel="nofollow">See here/JSFiddle</a>] [<a href="http://www.hongkiat.com/blog/html5-progress-bar/" rel="nofollow">Where I got the code from</a>]</p>
  
  <pre><code> &lt;body&gt;
      &lt;div class="demo-wrapper html5-progress-bar"&gt; &lt;!-- This one shows just fine --&gt;
          &lt;div class="progress-bar-wrapper"&gt;
              &lt;progress id="progressbar" value="0" max="100" stop="57"&gt;&lt;/progress&gt;    &lt;span class="progress-value"&gt;0%&lt;/span&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="demo-wrapper html5-progress-bar"&gt; &lt;!-- This one? Not so much. --&gt;
          &lt;div class="progress-bar-wrapper"&gt;
              &lt;progress id="progressbar2" value="0" max="100" stop="57"&gt;&lt;/progress&gt;   &lt;span class="progress-value"&gt;0%&lt;/span&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Any advice?</p>
  
  <p>Thank you!</p>