JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <tr>
    <td>10
      <input type="checkbox" class="tot_amount" value="10">
    </td>
  </tr>
  <tr>
    <td>20
      <input type="checkbox" class="tot_amount" value="20">
    </td>
  </tr>
  <tr>
    <td>30
      <input type="checkbox" class="tot_amount" value="30">
    </td>
  </tr>
  <tr>
    <td>40
      <input type="checkbox" class="tot_amount" value="40">
    </td>
  </tr>
  <tr>
    <td>50
      <input type="checkbox" class="tot_amount" value="50">
    </td>
  </tr>
  <tr>
    <td>60
      <input type="checkbox" class="tot_amount" value="60">
    </td>
  </tr>
  <tr>
    <td>70
      <input type="checkbox" class="tot_amount" value="70">
    </td>
  </tr>

  <tr>
    <td>Total
      <input type="text" id="total1" readonly>
    </td>
  </tr>
</table>

JavaScript

$(function() {

  function getTotal(isInit) {

    var total = 0;
    var selector = isInit ? ".tot_amount" : ".tot_amount:checked";
    $(selector).each(function() {
      total += parseInt($(this).val());
    });
    //$("#tot_amount").val(sum.toFixed(3));

    if (total == 0) {
      $('#total1').val('');
    } else {
      $('#total1').val(total);
    }

  }

  $(".tot_amount").click(function(event) {
    getTotal();
  });
  getTotal(true);

});