progress bar not updating its width in file uploads
<p>I am uploading files and showing progress bars for each load, but it only applies to only one progress bar.  </p>

<p>In html, </p>

<pre><code>   &lt;input type="file" id="file-input" multiple&gt;
   &lt;div id="file-list"&gt;
   &lt;/div&gt;
</code></pre>

<p>In Javascript, </p>

<pre><code>$('#file-input').change(function(e) {

for (var i = 0, f; f = files[i]; i++) {

    var reader = new FileReader();
    reader.readAsBinaryString(f);

    reader.onloadstart = function (e) {
      var text = '&lt;div&gt;&lt;div id="progress_bar" class="loading"&gt;&lt;div class="percent"&gt;0%&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
      $('#file-list').append(text);
    }

    reader.onload = function(e) {
       var progress = document.querySelector('.percent');
       progress.style.width = '100%'; // replacing with percentage
       progress.textContent = '100%';
    }
 }
</code></pre>

<p>});</p>

<p>The result for uploading three files at once is showing one progress bar with 100% and two bars with 0%. What's wrong with this? </p>