Jquery动态无法生成多个进度条，前端大神指点

引用的进度条js文件
!function($){
$.fn.extend({
goalProgress: function(options) {
var defaults = {
goalAmount: 100,
currentAmount: 50,
speed: 1000,
textBefore: '',
textAfter: '',
milestoneNumber: 70,
milestoneClass: 'almost-full',
callback: function() {}
}

        var options = $.extend(defaults, options);
        return this.each(function(){
            var obj = $(this);

            // Collect and sanitize user input
            var goalAmountParsed = parseInt(defaults.goalAmount);
            var currentAmountParsed = parseInt(defaults.currentAmount);

            // Calculate size of the progress bar
            var percentage = (currentAmountParsed / goalAmountParsed) * 100;

            var milestoneNumberClass = (percentage > defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : ''

            // Generate the HTML
            var progressBar = '<div class="progressBar">' + defaults.textBefore + currentAmountParsed + defaults.textAfter + '</div>';

            var progressBarWrapped = '<div class="goalProgress' + milestoneNumberClass + '">' + progressBar + '</div>';

            // Append to the target
            obj.append(progressBarWrapped);

            // Ready
            var rendered = obj.find('div.progressBar');

            // Remove Spaces
            rendered.each(function() {
                $(this).html($(this).text().replace(/\s/g, '&nbsp;'));
            });

            // Animate!
            rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback);

            if(typeof callback == 'function') {
                callback.call(this)
            }
        });
    }
});

}(window.jQuery);

生成进度条

调用进度条

    $(document).ready(function(){

        $('#sample_goal').goalProgress({

            goalAmount: 100,

            currentAmount: 50,

            textBefore: '',

            textAfter: ''

        });

    });

id一样了吧。。这样的话id选择器只能选出第一个容易，改成属性选择器

 $('[id="sample_goal"]')

而且如果是dom ready执行后动态添加的也没有效果，要在添加后选出新元素重新调用goalProgress进行初始化