La parte HTML del código a continuación funciona cuando lo uso sin una tabla, pero no funciona cuando las entradas del formulario se colocan dentro de la fila de la tabla. Básicamente el total será hacia abajo según la caja celeste. ¿Alguien puede ayudar por favor?
<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="" />