title: calculations on multiple selects dropdown
body: <p>I am trying calculate the amount on change of select dropdown. I need each row calculation front of that row i.e. subtotal and all subtotal will be at bottom at "Total Amount" </p>
  
  <p>I am getting the calculations for first row, but there is issues somewhere, i cannot findout properly. Please help me.</p>
  
  <p><a href="https://i.stack.imgur.com/mfmtO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mfmtO.png" alt="enter image description here"></a></p>
  
  <p>My code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  
  jQuery(document).ready(function() {
   var bookIndex = 1;
      jQuery('#orderform')
          // Add button click handler
    
          .on('click', '.addButton', function() {
              bookIndex++;
     
              var $template = jQuery('#bookTemplate'),
                  $clone    = $template
                                  .clone()
                                  .removeClass('hide')
                                  .addClass('form-group')
                                  .removeAttr('id')
                                  .removeAttr('style')
          .attr('id', "row"+bookIndex)
                                  .attr('data-index', bookIndex)
                                  .insertBefore($template);
     jQuery("#row"+bookIndex+' .addprice span').addClass('item_price');
     jQuery("#row"+bookIndex+' .addprice input').addClass('itemprice');
     jQuery("#row"+bookIndex+' &gt; div ').removeClass('addprice');
  
              
              // Add new fields
              // Note that we also pass the validator rules for new field as the third parameter
     
     var totalamount = 0;
      var price =0;
      jQuery('.dynamic-fields &gt; .form-group').each(function () {
       price = jQuery("span.item_price").html();
       totalamount += parseFloat( price );
      });
      
      jQuery("#totalamount &gt; span").html(totalamount);
      jQuery("#totalamount").attr('data-amount', totalamount);
             
          })
  
          // Remove button click handler
          .on('click', '.removeButton', function() {
              var $row  = jQuery(this).parents('.form-group'),
                  index = $row.attr('data-book-index');
  
              // Remove fields
             
  
              // Remove element containing the fields
              $row.remove();
      var totalamount = 0;
      var price =0;
      jQuery('.dynamic-fields &gt; .form-group').each(function () {
       price = jQuery("span.item_price").html(); 
       totalamount += parseFloat( price );
      });
      
      jQuery("#totalamount &gt; span").html(totalamount);
      jQuery("#totalamount").attr('data-amount', totalamount);
     
          });
  });
  
  
  
  jQuery(document).ready(function(){
   var totalamount = 0;
   var price =0;
   jQuery('.dynamic-fields &gt; .form-group').each(function () {
    price = jQuery("span.item_price").html();
    totalamount += parseFloat( price );
   });
      
   jQuery("#totalamount &gt; span").html(totalamount);
   jQuery("#totalamount").attr('data-amount', totalamount);
   
  })
  
  jQuery(".dynamic-fields").each(function() {
    var tpy = parseInt(jQuery(".service_type option:selected").val());
    var clths = parseInt( jQuery(".cloths option:selected").val() );
    var quantity = parseInt( jQuery(".quantity option:selected").val() );
    
    var total;
    total= tpy + clths * quantity; 
    jQuery("span.item_price").html(total);
    jQuery("input.itemprice").attr('value', total);
  });
  
  jQuery(document).on("change", '.dynamic-fields &gt; div.form-group select', function() {
      var total = 0; 
   var id  = jQuery(this).parent().parent().attr('id');
   var index  = jQuery(this).parent().parent().attr('data-index');
   id = '#'+id+' '; //alert(id); //alert(index);
      //jQuery('.form-group').each(function () {
    
          var tpy   = jQuery(id+'.service_type option:selected').val();
    var clths   = jQuery(id+'.cloths option:selected').val();
    var quantity  = jQuery(id+'.quantity option:selected').val();
    
    total= ( parseInt(tpy) + parseInt(clths) ) * parseInt(quantity); 
    jQuery(id+".item_price").html(total);
   jQuery(id+".itemprice").attr('value', total);
      //});
   var totalamount = 0;
   var price =0;
   jQuery('.accept-checkbox.dynamic-fields &gt; div.form-group').each(function () {
    price = jQuery("span.item_price").html(); 
    totalamount += parseFloat( price );
   });
      
   jQuery("#totalamount &gt; span").html(totalamount);
   jQuery("#totalamount").attr('data-amount', totalamount);
   
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form name="neworder" action="&lt;?php the_permalink(); ?&gt;" method="post" id="orderform"&gt; 
  &lt;div class="accept-checkbox dynamic-fields"&gt;
     
      &lt;div class="form-group" id="row1" data-index="1"&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="service_type" name="service_type[]"&gt;
        &lt;option value="20"&gt;Iron&lt;/option&gt;
        &lt;option value="30"&gt;Wash&lt;/option&gt;
        &lt;option value="40"&gt;Wash &amp;amp; Iron&lt;/option&gt;
        &lt;option value="50"&gt;Dryclean&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="cloths" name="cloths[]"&gt;
        &lt;option value="10"&gt;Shirt&lt;/option&gt;
        &lt;option value="20"&gt;Tshirt&lt;/option&gt;
        &lt;option value="30"&gt;Kurta&lt;/option&gt;
        &lt;option value="40"&gt;Jeans&lt;/option&gt;
        &lt;option value="50"&gt;Trouser&lt;/option&gt;
        &lt;option value="60"&gt;Trouser&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="quantity" name="quantity[]"&gt;
        &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
        &lt;option value="3"&gt;4&lt;/option&gt;
        &lt;option value="5"&gt;5&lt;/option&gt;
        &lt;option value="6"&gt;6&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2"&gt;
       &lt;span class="item_price"&gt;30&lt;/span&gt;
       &lt;input type="hidden" class="itemprice" value="00"/&gt; 
      &lt;/div&gt;
      &lt;div class="col-sm-1"&gt;
       &lt;button class="btn btn-default addButton" type="button"&gt;&lt;i class="fa fa-plus"&gt;+&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;!-- The template for adding new field --&gt;
     
     &lt;div id="bookTemplate" class=" hide" style="display: none;"&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="service_type" name="service_type[]"&gt;
        &lt;option value="20"&gt;Iron&lt;/option&gt;
        &lt;option value="30"&gt;Wash&lt;/option&gt;
        &lt;option value="40"&gt;Wash &amp;amp; Iron&lt;/option&gt;
        &lt;option value="50"&gt;Dryclean&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="cloths" name="cloths[]"&gt; 
        &lt;option value="10"&gt;Shirt&lt;/option&gt;
        &lt;option value="20"&gt;Tshirt&lt;/option&gt;
        &lt;option value="30"&gt;Kurta&lt;/option&gt;
        &lt;option value="40"&gt;Jeans&lt;/option&gt;
        &lt;option value="50"&gt;Trouser&lt;/option&gt;
        &lt;option value="60"&gt;Trouser&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
       &lt;select class="quantity" name="quantity[]"&gt;
        &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
        &lt;option value="3"&gt;4&lt;/option&gt;
        &lt;option value="5"&gt;5&lt;/option&gt;
        &lt;option value="6"&gt;6&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-2 addprice"&gt;
       &lt;span &gt;30&lt;/span&gt;
       &lt;input type="hidden" value="00"/&gt; 
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
       &lt;button class="btn btn-default removeButton" type="button"&gt;&lt;i class="fa fa-minus"&gt; - &lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt; 
      &lt;div class="col-md-5 pull-right"&gt;
       &lt;span&gt;&lt;strong&gt;Total Amount : &lt;/strong&gt;&lt;/span&gt;&lt;span id="totalamount"&gt; &lt;span&gt;00.00&lt;/span&gt;/- &lt;/span&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>