title: Flask - Dynamically update JavaScript with Python variable
body: <p>I'm looking to dynamically update JavaScript to increment a progress bar on my Flask html page. How would I go about this?</p>
  <p>Snippet of my app.py</p>
  <pre><code>counter = 0
  
  @app.route('/checking')
  def checking():
      global counter
      --code here to run whilst incrementing--
      counter += 1
      pagename = 'Check Stat'
      return render_template('CheckStat.html', pagename=pagename, counter=counter)
  </code></pre>
  <p>JS contained within a custom.js which is called into the html page (via a layout)</p>
  <pre><code> $(function() {
      var current_progress = {{counter}};
      var interval = setInterval(function() {
          current_progress += 10;
          $(&quot;#dynamic&quot;)
          .css(&quot;width&quot;, current_progress + &quot;%&quot;)
          .attr(&quot;aria-valuenow&quot;, current_progress)
          .text(current_progress + &quot;% Complete&quot;);
          if (current_progress &gt;= 100)
              clearInterval(interval);
      }, 1000);
    });
  </code></pre>
  <p>Progress bar is then displayed on the HTML page:</p>
  <pre><code>&lt;div class=&quot;progress&quot;&gt;
          &lt;div id=&quot;dynamic&quot; class=&quot;progress-bar progress-bar-success progress-bar-striped active&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 0%&quot;&gt;
            &lt;span id=&quot;current-progress&quot;&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>