title: Bootstrap progress bar dynamic element - Change width dynamically
body: <p>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.</p>
  
  <p>The other one is instantly at 100% without the delay.</p>
  
  <p>Here is the Code for better representation:
  <a href="https://jsfiddle.net/gezgind/DTcHh/7133/" rel="nofollow">https://jsfiddle.net/gezgind/DTcHh/7133/</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="reportbars"&gt;
          &lt;div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;"&gt;
              &lt;div class="progress-bar" id="tracking" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;"&gt;
                  &lt;span style="visibility:hidden"&gt;xxxx&lt;/span&gt;
              &lt;/div&gt;
        &lt;/div&gt;
        &lt;button id="report_start" type="button" class="btn btn-default"&gt;Start&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code> $("#report_start").click(function(){
      $("#reportbars").append(
          '&lt;div class="progress" style="width:500px;margin-bottom:0px;margin-top:20px;"&gt;' +
          '&lt;div class="progress-bar" id="tracking1" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration: 3s;"&gt;' +
          '&lt;span style="visibility:hidden"&gt;Tracking 950.325&lt;/span&gt;' +
          '&lt;/div&gt;&lt;/div&gt;'
      );
      $("#tracking").css("width","100%");
      $("#tracking1").css("width","100%");
  });
  </code></pre>
  
  <p>How do I fix ?</p>