title: How to perform calculation on a for loop jinja template field using javascript
body: <p>I have a list of items that I queried from my database using a for-loop. I want to multiply each item price by its quantity to get a new total price and also get the total price for all items in the for-loop. How can I achieve this using JS?</p>
  
  <p>I followed this example  <a href="https://www.jqueryscript.net/form/Do-Calculations-Form-Fields-AutoCalc.html" rel="nofollow noreferrer">https://www.jqueryscript.net/form/Do-Calculations-Form-Fields-AutoCalc.html</a> but, only the first item in the for loop is working and the other items on the list are all having the same total with the first item </p>
  
  <p>This is a section of my code </p>
  
  <pre><code>&lt;form name="cart"&gt;
  &lt;table class="timetable_sub"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
  
     &lt;th&gt;Product&lt;/th&gt;
     &lt;th&gt;Product Name&lt;/th&gt;
     &lt;th&gt;Quantity&lt;/th&gt;
     &lt;th&gt;Price&lt;/th&gt;
     &lt;th&gt;Total&lt;/th&gt;
     &lt;th&gt;Remove&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    {% for item in user_cart %}
     &lt;tr class="rem1"&gt;    
     &lt;td class="invert"&gt;{{item.item_name}}
         &lt;/td&gt;
     &lt;td class="invert"&gt;&lt;input type="number" name="qty" value=" 
                  {{item.quantity}}"&gt;     
      &lt;/td&gt;
        &lt;td class="invert"&gt;&lt;input type="number" name="price" disabled 
        value="{{item.amount}}"&gt;
         &lt;/td&gt;
     &lt;td class="invert"&gt;&lt;input type="text" name="item_total" value="" 
         jAutoCalc="{qty} * {price}"&gt;
         &lt;/td&gt;
  &lt;/tr&gt;
  {% endfor %}
  &lt;/tbody&gt;&lt;/table&gt;
  &lt;input type="text" name="sub_total" value="" 
       jAutoCalc="SUM({item_total})"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to achieve the result in the example <a href="https://www.jqueryscript.net/demo/Do-Calculations-Form-Fields-AutoCalc/" rel="nofollow noreferrer">https://www.jqueryscript.net/demo/Do-Calculations-Form-Fields-AutoCalc/</a> 
  but I am getting this <a href="https://drive.google.com/file/d/1CYl3olVoYk6K-n96zxXpf11B1QWZ7FWA/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1CYl3olVoYk6K-n96zxXpf11B1QWZ7FWA/view?usp=sharing</a></p>