JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<table class="table table-boredered">
  <tr>
    <th>Cost</th>
    <th><span id="cost" data-val="1000">1,000</span></th>
  </tr>
  <tr>
    <td>VAT</td>
    <td><span id="vat"></span></td>
  </tr>
  <tr>
    <td>Deliver</td>
    <td>
      <select id="trn">
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Total</td>
    <td><span id="total">xxx</span></td>
  </tr>
</table>

JavaScript

$(function() {
  var cost = $('#cost').data('val');//store cost from data-val
  $('#vat').html($(cost) * 1.07);//calculate vat from $cost
  var vat=$('#vat').val();
  //select
  $('select').on('change','#trn', function() {
    var optionSelected = $(this).find("option:selected");
    var trn = optionSelected.val();
		$('#total').html($(cost).val+$('vat').val+$('trn').val());
    
  })
});