Sum values of a table column using jQuery

Question

I have dynamically created a table. There is one column empty on page load but it fills values when I choose the quantity of a dropdown menu(other column) and a default price value (other column). I want to add the total values created of this process using jQuery and display the total value.

Has anyone any ideas how can I do that?I have tried a lot but no results appeared.

I try this:

$(document).each("[id^=total]", function(event){
  var num = this.id.slice(5);
  var sum = 0;

     var value = $('#total'+num).text();
     sum += parseFloat(this.value);

     $('#sum').text(sum);
 });

HTML (where the result will be displayed):

<tr>
   <th colspan="6" style="text-align:right">Total:</th>
   <th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>

HTML (id='qua2' is a dropdown menu from 1 to 20):

<tr>
    <td><center><selectclass='choose'id='qua2'></select></center></td>
    <td><center><spanid='yprice2'>101.10</span></center></td>
    <td><center><spanid='total2'></span></center></td>
</tr>

NOTICE:

Column total is created after table creation.I choose a value of dropdown and makes this process (value of dropdown * price).Result displayed in column total.

UPDATED (I use this script but the result in id='sum' is NaN) :

$(document).on('change', "[id^=qua]", function(event){
var num = this.id.slice(3);
var sum = 0;
var value = $("#qua"+num).val();
var yprc = $("#yprice"+num).text();
var amount = value * yprc;
amount = amount.toFixed(2);

var $sum = $("#sum");
var $total = $("#total"+num);

    $total.html(amount);

 $("[id^=total]").each(function(){
 sum += parseFloat($(this).text());
 });
 $sum.text(sum);
});

Answer 1

Working fiddle.

What I suggest is to avoid the use of id's and use classes instead :

calc_total();

$(".choose").on('change', function(){
  var parent = $(this).closest('tr');
  var price  = parseFloat($('.price',parent).text());
  var choose = parseFloat($('.choose',parent).val());

  $('.total',parent).text(choose*price);

  calc_total();
});

function calc_total(){
  var sum = 0;
  $(".total").each(function(){
    sum += parseFloat($(this).text());
  });
  $('#sum').text(sum);
}

Hope this helps.

calc_total();

$(".choose").on('change', function(){
  var parent = $(this).closest('tr');
  var price  = parseFloat($('.price',parent).text());
  var choose = parseFloat($('.choose',parent).val());

  $('.total',parent).text(choose*price);

  calc_total();
});

function calc_total(){
  var sum = 0;
  $(".total").each(function(){
    sum += parseFloat($(this).text());
  });
  $('#sum').text(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <select class='choose'>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
      </center>
    </td>
    <td>
      <center>
        <span class='price'>100</span>
      </center>  
    </td>
    <td>
      <center>
        <span class='total'>100</span>
      </center>
    </td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:right">Total:</th>
    <th colspan="2" style="text-align:center"><span id="sum"></span></th>
  </tr>
</table>