I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows all values within the loop to be passed through the script.
{% for loans in d1_companies %}
<div id="security-value">{{loans.market_value}}</div>
{% endfor %}
<div id="test"></div>
<script>
for(let i = 0; i < 1000; i++) {
let sum = document.querySelectorAll(`[id^="test"]`)[i];
let values = [document.getElementById("security-value").innerText];
const summed_value = values.reduce((accumulator, currentValue) => accumulator + currentValue);
sum.innerText = summed_value;
}
</script>