Duplicate a <div> Tag with a unique ID for each Tag

See more:

Javascript

CSS

HTML

jQuery

Hey Guys,

I have an Array with a lot of progress bars in it. I parse these progress bars into a html-table later on. Every progress bar shall get a different ID so every progress bar is unique. This doesn't work quite well:

$.each(status, function (index) {
                           status[index] = '<div id="progressBar'+ index +'"><div></div></div>';
                           progress(percent, "#progressBar" + index);
                        }
                    });

The progress-function:

function progress(percent, $element) {
                var progressBarWidth = percent * $element.width() / 100;
                $element.find('div').animate({ width: progressBarWidth }, 500).html(percent.replace('\r\n', '') + "%");
            }

(I know the loop does not make much sense here, but it's a bit different in my code which isn't important in this context)

Any suggestions how I can solve my problem?