Here is the HTML template where javascript code is implemented inside the for loop. I am trying to take the required data from django models.

{% for other_campaign in other_campaigns %}
<div class="container" style="background-color:#f1f1f1">
  <div class="row">
    <div class="column-33">
      <img src="{% if other_campaign.Image %}
      {{other_campaign.Image.url}}
      {% else %}
      {% static './Images/blank.jpg' %}
      {% endif %}" class="camp_img" alt="App">
    </div>
    <div class="column-66">
      <a href="{% url 'detail' other_campaign.id %}" class="victim"><b>Victim: {{other_campaign.Name}}</b></a>
      <div class="target"><b><i>Target Amount:</i> {{other_campaign.Target}}</b></div>
      <div class="target"><b></b><i>Collected Amount:</i> {{other_campaign.Collected}}</div>
      <br>
      <p><b>Info: {{other_campaign.Info}}</b></p>
      <br>
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
          aria-valuemax="100"></div>
        
        <br>
      </div>
      <div class="progress_text">Rs. {{ other_campaign.Collected }} - Done</div>
      <br>
      <br>
      <button class="button"><a href="#" class="donate_here">Donate Here</a></button>
      <br>
      <div style="float: right;">Date_added: {{other_campaign.Date_added}}</div>
    </div>
    <br>
  </div>
</div>

here is the javascript code

<!-- progress bar script -->
<script>
  const progress = document.querySelector(".progress-bar")
  const progpercent = {{other_campaign.Collected}}/{{other_campaign.Target}};
  progress.style.width = `${progpercent * 100}%`;
</script>
{% endfor %}

And here is the image of output in website.