Bootstrap progress bar dynamic element - Change width dynamically

Question

I have 2 progress bars on my page. One is a static HTML version, the other one is created dynamically via jQuery. If I want to change the width in jQuery so that progress bar is being "progressed" only the static one is working.

The other one is instantly at 100% without the delay.

Here is the Code for better representation: https://jsfiddle.net/gezgind/DTcHh/7133/

html

<div class="container">
    <div id="reportbars">
        <div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">
            <div class="progress-bar" id="tracking" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">
                <span style="visibility:hidden">xxxx</span>
            </div>
      </div>
      <button id="report_start" type="button" class="btn btn-default">Start</button>
</div>

js

 $("#report_start").click(function(){
    $("#reportbars").append(
        '<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">' +
        '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">' +
        '<span style="visibility:hidden">Tracking 950.325</span>' +
        '</div></div>'
    );
    $("#tracking").css("width","100%");
    $("#tracking1").css("width","100%");
});

How do I fix ?

Answer 1

Check it out..

new fiddle

You have to tweak your js code little bit. You are doing all your work in one go. do it as :

JS Code:

    /* Latest compiled and minified JavaScript included as External Resource */

$("#report_start").click(function(){


    $("#reportbars").append('<div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;">'+
                            '<div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;">'+
                                '<span style="visibility:hidden">Laufendes Tracking 950.325</span>'+
                            '</div></div>');





    $("#tracking").css("width","100%");
    setTimeout(function(){$("#tracking1").css("width","100%");},10)
});