title: Upload multiply images with progress bar
body: <p>I tring to build a image upload website but I have problem when I try to add progress bar to the images(this problem happen only when I got more than 1 image).
  If I upload more than 1 image it giving a progress bar only for one image.</p>
  
  <pre><code>var uuid,formData;
  for (var i = 0; i &lt; input.length; i++) {
      uuid = createUUID();
      formData = new FormData();
      var reader = new FileReader();
      /*
         Getting thumbnail of the uploaded image and adding a progress bar
         Here the problem with the progress bar it always create a div with
         same id: 'bar'+i (the i not changing and always stay the same)
      */
      reader.onload = function (e) {
          var li = document.createElement("li");
          li.innerHTML = "&lt;img src='" + this.result + "'/&gt;&lt;div class='progress'&gt;&lt;div id='bar" + i + "' class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'&gt;0%&lt;/div&gt;&lt;/div&gt;&lt;a href='images/" + uuid + "' target='_blank'&gt;Direct link&lt;/a&gt;";
          ul.appendChild(li);
      }
      reader.readAsDataURL(input[i]);
      // Add the image to the form
      formData.append('images[]', input[i], uuid);
      // HTTP request to upload each image
      var http = new XMLHttpRequest();
      http.open("POST", "upload.php", true);
      http.upload.onprogress = function (e) {
          if (e.lengthComputable) {
              var percentage = (e.loaded / e.total) * 100;
              document.getElementById('bar' + 1).style.width = percentage + "%";
          }
      };
  
      http.onerror = function () {
          alert('An error occurred while submitting the form. Maybe your file is too big');
      };
      http.onload = function () {
          document.getElementById("bar" + 1).className += " progress-bar-success";
      };
      http.send(formData);
  }
  </code></pre>