JSFiddle - React, Tailwind, and code Playground
HTML
<table border="0" cellspacing="0" cellpadding="0" class="t" id="basketorder"><thead>
<tr>
<th width="50" valign="middle"></th>
<th width="400" valign="middle">Product(s)</th>
<th width="50" valign="middle">Q-ty</th>
<th width="150" valign="middle">Available options</th>
<th width="110" valign="middle">Price</th>
<th width="110" valign="middle">Total</th>
</tr></thead><tbody>
<tr class="product">
<td valign="middle"></td>
<td width="400" valign="middle" style="text-align:left;">model 123
<input type="hidden" value="3" name="product[]">
<input type="hidden" value="13" name="cid[]"></td>
<td width="50" valign="middle"><select class="qty" name="qty[]" style="width: 50px; color: rgb(0, 0, 0); border: 1px solid rgb(192, 192, 192); background-color: rgb(255, 255, 255);"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option...
CSS
.styled-select.inprd{width:150px;margin:5px;}
input[type="text"]{width:50px;}
JavaScript
function update_amounts(){
var sum = 0.0;
var optionsamount = 0.0;
$('#basketorder > tbody > .product').each(function() {
$('.selectedoptionselect option:selected').each(function(){
optprice = $(this).attr('price');
optionsamount+= parseFloat(optprice);
})
var qty = $(this).find('.qty option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price);
sum+= (amount + optionsamount);
$(this).find('.amount').text(''+ amount.toFixed(2));
//alert(sum);
});
$('.total').text(sum);
}