HTML5 file uploading with multiple progress bars

I'm uploading multiple files via XmlHTTPRequest and HTML5. I have the uploading working fine, but I would like to have a progress bar for each file upload going on. The code I have, however, uses the last progress bar for ALL of the file uploads instead of each upload using its own progress bar. So this is mostly visual on the client-side, but it's really annoying me. For some reason I'm assuming that the event that attaches the progress of the file upload overwrites itself and uses the last progress bar. Here's my code:

var files = event.dataTransfer.files;

    // iterate over each file to upload, send a request, and attach progress event
    for (var i = 0, file; file = files[i]; i++) {
        var li = $("<li>" + file.name + "<div class='progressbar'></div></li>");

        // add the LI to the list of uploading files
        $("#uploads").append(li);

        // fade in the LI instead of just showing it
        li.hide().fadeIn();

        var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener('progress', function(e) {
                var percent = parseInt(e.loaded / e.total * 100);
                li.find(".progressbar").width(percent);
            }, false);

            // check when the upload is finished
            xhr.onreadystatechange = stateChange;

            // setup and send the file
            xhr.open('POST', '/attachments', true);
            xhr.setRequestHeader('X-FILE-NAME', file.name);
            xhr.send(file);
        }

I'm assuming that the proper "li" is not getting read properly by the "progress" event. I suspect there's some sort of binding I have to do to tell the "progress" event to use a particular variable as it's "li", but I'm not sure what I'm missing.