title: jquery calculate multi-field quantity price and total from select onchange
body: <p>I have a multi-field add function and would like to get the price from every field row's selected option then calculate with quantity and sum in the total</p>
  
  <p>But i get stuck in jquery part that cannot get price and calculate each row</p>
  
  <pre><code>$(".payselect").on("change", function() {
  
    var price = 0;
    var pricenumber = 0;
    $(".payselect").find("option:selected").each(function() {
      price += $(this).data("price");
    });
    $('.paynumber').val(1);
    $('.payunit').val(price);
  
    var unitprice = $('.payunit').val();
    var unitnumber = $('.paynumber').val();
  
    pricenumber = unitprice * unitnumber;
  
    $("#paytotal").val(pricenumber);
  
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".payselect").on("change", function() {
  
    var price = 0;
    var pricenumber = 0;
    $(".payselect").find("option:selected").each(function() {
      price += $(this).data("price");
    });
    $('.paynumber').val(1);
    $('.payunit').val(price);
  
    var unitprice = $('.payunit').val();
    var unitnumber = $('.paynumber').val();
  
    pricenumber = unitprice * unitnumber;
  
    $("#paytotal").val(pricenumber);
  
  });
  
  $(document).on("change", ".payunit", function() {
    var sum = 0;
    $(".payunit").each(function() {
      sum += +$(this).val();
    });
    $("#paytotal").val(sum);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="worked"&gt;
  
    &lt;th&gt;Item Name&lt;/th&gt;
    &lt;th&gt;Quantity&lt;/th&gt;
    &lt;th&gt;Unit Price&lt;/th&gt;
  
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;select class="payselect" name="item_name[]" title="Select Item.." required&gt;
          &lt;option selected&gt;Select...&lt;/option&gt;
            &lt;option data-price="20" value="Hat"&gt;Hat&lt;/option&gt;
            &lt;option data-price="10" value="Hat"&gt;Shirt&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;input class="paynumber" name="item_quantity[]" type="number"&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;input type="number" name="item_unit_price[]" value="" class="payunit"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;select class="payselect" name="item_name[]" title="Select Item.." required&gt;
          &lt;option selected&gt;Select...&lt;/option&gt;
            &lt;option data-typeid="20" value="Hat"&gt;Hat&lt;/option&gt;
            &lt;option data-typeid="10" value="Hat"&gt;Shirt&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;input class=" paynumber" name="item_quantity[]" type="number"&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;input type="number" name="item_unit_price[]" value="" class="payunit"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;label&gt;Total Amount&lt;/label&gt;
  
  &lt;input type="number" name="sp_price" value="" id="paytotal" class="total"&gt;</code></pre>
  </div>
  </div>
  </p>