AWS Javascript Uploading Multiple Files with progress reported

Scenerio....

I'm trying to upload a number of files to AWS through the Javascript API. While the number of files may be many (100 - 500), I am managing this by first sending the file information to my web server (via Ajax) to parse name, size, etc... and insert this information into my database. I then return the id of the newly created record back to my web page and send the file to S3 using the 'id' as the file name. This way, I believe I am creating unique records and file names.

Problem...

Since my Ajax routine is in a for loop, so is the file upload to S3. I cannot get this script to give me any valuable feedback on the upload progress (the upload itself works fine).

Any of the following would make me happy...

1. A div with the total upload size (all the files) and the total progress reported.
2. A list of all the files being uploaded with their totals and their amounts loaded.
3. A div that reports "20 out of 520 files loaded"

My Code...

var aj = $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: { packnameid: packnameid,
                    number: number,
                    name: name
                },
            success: function(result) {
                     // Initialize the Amazon Cognito credentials provider
                AWS.config.region = 'us-east-1'; // Region
                AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: '********************',
                });

                var bucket = new AWS.S3({params: {Bucket: 'traseindex'}});
                var params = {Key: result+".pdf", ContentType: file.type, Body: file};

                bucket.upload(params).on('httpUploadProgress', function(evt) {
                document.getElementById('total').innerHTML = evt.total;
                document.getElementById('status').innerHTML = i +" of " + files.length + " " + parseInt((evt.loaded * 100) / evt.total)+'%'
                console.log("Uploaded :: " + parseInt((evt.loaded * 100) / evt.total)+'%');

                }).send(function(err, data) {
                  document.getElementById('total').innerHTML = i +" of "+ files.length + " complete";
                });
            }
        });

No matter how I update the httpUploadProgress piece, I fail to achieve my goal. For instane, "i of file.length" immediately reports that all the files are done, yet the parseint evaluation continues to show me the percentage complete of each file as the upload processes.

Ive tried creating multiple divs with the id of the loop iteration "i", then append each of them with the parseint evaluation, but the percentage only shows up in the last div created.

If someone could point me in the correct direction, how to approach this, i do appreceiate it.

thanks.