The HTML part of the code below works when I use it without a table but does not work when the inputs of the form are placed inside the row of the table. Basically the total will be down according to the celestial box. Can anyone help please?
<script>
$(document).on("change", ".track,[name='type[]']", function() {
const sum = {
male: 0,
female: 0
};
$(".track").each(function() {
const type = $(this).prev().val();
sum[type] += +$(this).val();
});
$("#male-total").val(sum.male);
$("#female-total").val(sum.female);
});
</script><script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<table widht="100" border="1" >
<tr>
<th><select name='type[]'><option value='male'>Male</option><option value='female'>Female</option></select></th>
<th><input type="text" name="amount[]" class="track" value="" /> </th>
</tr>
<tr>
<th><select name='type[]'><option value='male'>Male</option><option value='female'>Female</option></select></th>
<th><input type="text" name="amount[]" class="track" value="" /> </th>
</tr>
</table>
<hr>
<label> Male Total: </label>
<input type="text" id="male-total" value="" />
<label> Female Total: </label>
<input type="text" id="female-total" value="" />