title: Multiplying values of 2 input fields in 3rd input field within a for loop
body: <p>I'm having a slight problem. I have a <strong>For Loop</strong> with which I'm creating multiple 3 input fields <em>(Quantity, Rate, Price)</em>. I'm using <strong>Javascript</strong> function to get the Id of <strong>'Quantity'</strong> &amp; <strong>'Rate'</strong> and show the <strong>Product</strong> in 3rd input <strong>'Price'</strong>. My problem is that in the for loop, I get the product of 1st record only by using Id &amp; the rest of the 'Price' inputs do not catch the Product of their respective 'Quantity' &amp; 'Rate' inputs. How do I manage to get this working with multiple 3 inputs? Please help me, I shall be very thankful.</p>
  
  <p><strong>See Input Entry Image Here</strong></p>
  
  <p><img src="https://i.stack.imgur.com/0VrOy.jpg" alt="See Input Entry Image Here"></p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;?php
      $total = $total_entries;
      for($i=0; $i&lt;$total; $i++){
  ?&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="item"&gt;Item&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="item[]"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="quantity"&gt;Quantity&lt;/label&gt;
                  &lt;input id="quantity" type="number" class="form-control" name="quantity[]"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="rate"&gt;Rate&lt;/label&gt;
                  &lt;input id="rate" type="text" class="form-control" name="rate[]"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="price"&gt;Price&lt;/label&gt;
                  &lt;input id="price" type="number" class="form-control" name="price[]"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php } ?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript Function:</strong></p>
  
  <pre><code>&lt;script&gt;
      $('#quantity, #rate').change(function(){
          var rate = parseFloat($('#quantity').val()) || 0;
          var box = parseFloat($('#rate').val()) || 0;
          $('#price').val(rate * box);    
      });
  &lt;/script&gt;
  </code></pre>