JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<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>

JavaScript

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);
}