JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tabela">
<tfoot>
<tr>
<td colspan="2"></td>
<td align="right">Total: <span id="total" class="total"></span> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<input type="checkbox" value="16" class="price"> item A (16)</td>
<td>
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
</td>
<td align="center"><span id="amount" class="amount">0</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="45" class="price"> item B (45)</td>
<td>
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
</td>
<td align="center"><span id="amount" class="amount">0</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="61" class="price"> item C (61)</td>
<td>
<select value="" class="qty" name="qty">
<option value="1">1 unidade</option>
<option value="2">2 unidades</option>
<option value="3">3 unidades</option>
<option value="4">4 unidades</option>
</select>
</td>
<td align="center"><span id="amount" class="amount">0</span></td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
update_amounts();
$('.qty, .price').change(update_amounts);
});
function update_amounts() {
var sum = 0;
$('table input:checked').each(function() {
var tr = $(this).closest('tr');
var qty = tr.find('.qty').val();
var price = $(this).val();
var amount = (qty * price) || 0;
sum += amount;
tr.find('.amount').text(amount);
});
$('.total').text(sum);
}