I have a Flask web application where I am calling an IBM Watson API (JSON output) and displaying the results in a series of Bootstrap modals where each contain information on a separate news article (eg. Watson returns 40 news articles, the page will have buttons for 40 modals with the data accessed via a loop). Within each modal I am trying to display a keyword in text next to a small percentage bar (to display the sentiment of the keyword). I have a nested for loop to extract the correct information and using the loop index to make the div id's unique. The results display correctly in the first modal only, however do not display in any of the other modals. I've tried combinations of adding the inner and outer loop indexes to the div id but cannot get it to work! Here is a simplified version of the code within the modal and the corresponding JavaScript. Thank you!

results.html

{% for results in watson_results %}
{% set resultsloop = loop %}

{% for item in results.enriched_text.keywords[0:5] %}
<ul class="list-group list-group-flush">
<li class="list-group-item">
    <div class="progress" style="display: inline-block; vertical-align: middle" id="progressdiv1-{{loop.index}}">
    <div class="progress-done-pos" style="display: inline-block; vertical-align: middle" id="progress1-{{loop.index}}" data-done={{item.sentiment.score}}>
    {{item.sentiment.score}} Positive
    </div>
    </div>
<span class="explanation" style="margin-left:5px; vertical-align:middle">{{item.text}}</span>
</li>
</ul> 
{% endfor %}

{% endfor %}

JavaScript

<script type="text/javascript">
var progress = document.getElementById('progress1-{{loop.index}}');
      
progress.style.width = (progress.getAttribute('data-done')*100) + "%";
progress.style.opacity = 1;
</script>