Tengo una aplicación web Flask en la que llamo a una API de IBM Watson (salida JSON) y muestro los resultados en una serie de modales Bootstrap donde cada uno contiene información en un artículo de noticias separado (por ejemplo, Watson devuelve 40 artículos de noticias, la página tendrá botones para 40 modales con los datos accedidos a través de un bucle). Dentro de cada modal, intento mostrar una palabra clave en el texto junto a una pequeña barra de porcentaje (para mostrar el sentimiento de la palabra clave). Tengo un bucle for anidado para extraer la información correcta y uso el índice de bucle para hacer que la identificación del div sea única. Los resultados se muestran correctamente solo en el primer modal, sin embargo, no se muestran en ninguno de los otros modos. ¡He intentado combinaciones de agregar los índices de bucle interno y externo a la identificación de div pero no puedo hacer que funcione! Aquí hay una versión simplificada del código dentro del modal y el JavaScript correspondiente. ¡Gracias!

resultados.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>