updating different progress bar values using addevenlistener

Question

I have a scenario where user uploads multiple files using HTML5 DnD and file API, sends data to the server using xmlhttprequest . To feedback users about file status my code creates prograss bar elements dynamically using javascript for each file. below is my code which does that

for(var i=0;i< files.length;i++)
    { 
    var row = tbl.insertRow(i);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    arr[i]=i;
    cell1.innerHTML=files[i].name;
    cell2.innerHTML=(Math.round(files[i].size/1024)==0?(files[i].size>0?1:0):(Math.round(files[i].size/1024)))+" KB";
    cell3.innerHTML="&nbsp;"+"<progress id=progress"+i+" max=100></progress>";
    var theForm=document.forms["DocumentForm"];
    var theDupe="progress"+i;
    xhr[i]=new XMLHttpRequest(); // this is an array, bcoz of multiple files

    xhr[i].upload.addEventListener("progress", function(evt ){  var theForm=document.forms["DocumentForm"]; var bar=document.getElementById(theDupe);  if (evt.lengthComputable) {  var currentValue=bar.value;  var percentComplete = Math.round(evt.loaded * 100 / evt.total); bar.value=currentValue+parseInt(percentComplete); }    }, false);  

    xhr[i].open('POST',url);
    xhr[i].send(data);   

right now only one progress bar gets updated, how can i update multiple progress bar the same time ?