title: Fetch API call for each item in a Jinja2 for loop
body: <p>I'm currently stuck on a personal project where Im making Fetch API calls to get the audio src for a list of html audio tags.</p>
  
  <p>The fetch call is triggered by an onclick event on the track. Though regardless of what track i click on, fetch calls /play_track/1/ and appends the audio player to only the first track. Any way to remedy this?</p>
  
  <p>As you can see my index.html is basically just jinja2:</p>
  
  <pre><code>{% extends 'base.html' %}
  
  {% block content %}
  
      {% for track in tracks %}
          {% include '_post.html' %}
      {% endfor %}
  
  {% endblock content %}
  </code></pre>
  
  <p>Heres _post.html with the Fetch call: (Currently using an onclick event to call but will switch to onpageload)</p>
  
  <pre><code>&lt;div class="card mb-3"&gt;
      &lt;div class="row no-gutters"&gt;
          &lt;div class="col-xl-4 col-lg-5 col-md-5 col-sm-5"&gt;
              &lt;img width="500px" height="500px" class="img-thumbnail thumb" src="{{ track.thumbnail }}" class="card-img" alt="{{ track.title }}"&gt;
          &lt;/div&gt;
          &lt;div class="col-xl-8 col-lg-7 col-md-6 col-sm-7"&gt;
              &lt;div id="card-body" class="card-body"&gt;
                  &lt;h5 class="card-title h5-title"&gt;{{ track.title }}&lt;/h5&gt;
                  &lt;p class="card-text p-artist"&gt;{{ track.artist }}&lt;/p&gt;
                  &lt;p class="card-text p-uploaded-at"&gt;&lt;small class="text-muted"&gt;Uploaded on {{ track.created_at.strftime('%b %m, %Y') }}&lt;/small&gt;&lt;/p&gt;
                  &lt;p onclick="fetchURL(event)" id="track-id"&gt;{{ track.id }}&lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
  
          function fetchURL(event) {
  
              tid = document.getElementById('track-id');
              track_id = tid.innerHTML;
  
              fetch(`${window.origin}/play_track/${track_id}`)
                  .then((response) =&gt; {
                      console.log(response.status);
                      return response.json();
                  })
                  .then(function(data) {
                      console.log(data.message.url);
                      createAudioPlayer(data);
                  });
          }
  
          function createAudioPlayer(data) {
  
              let cardBody = document.getElementById('card-body');
  
              let audio = document.createElement('audio');
              audio.controls = true;
  
              let source = document.createElement('source');
              source.type = "audio/mpeg";
              source.src = data.message.url
  
              cardBody.append(audio);
              audio.prepend(source);
          };
  
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the backend code: (Which im pretty sure if i tweak I can avoid Fetch all-together but thats another issue)</p>
  
  <pre><code>@bp.route('/play_track/&lt;track_id&gt;/')
  def play_track(track_id):
  
      track = Track.query.filter_by(id=track_id).first()
  
      res = requests.get(track.audio)
      if not res.status_code == 200:
          return f'Status code: {res.status_code}'
  
      json_res = json.loads(res.text)
      mpeg_audio_url = json_res['url']
  
      msg_dict = {
          'url': mpeg_audio_url
      }
  
      res = make_response(jsonify({'message': msg_dict}))
      return res
  </code></pre>
  
  <p>To summarize: Fetch call not understanding Jinja2 for loop. Whether i click on track 1, 10, or 46, etc, It calls /play_track/1/ and appends the audio tag to the first track.</p>
  
  <p>Thanks!</p>