monitor and update variable number of fields in php form - php

Question

I have an inventory form that pulls a variable number of rows of items from a database and creates a table/list of them, with input text boxes for quantity of cases( of 12) and individual items, and the script updates the total box with the sum of those two. I have it working if I put discrete sections of code in for each row, and have tried many while/for loops and the problem I think is the function is inside the loop and stops it from working. I looked at posts using .each() , but do not see any example that works with my setup. I went and answered a couple simple questions on here for others before posting this question, hoping to please the code gods ;-)
<form>
<div class="ex3">
<div class="headrow">
<div class="column">Batch</div>
<div class="column">Name</div>
<div class="column">UPC</div>
<div class="column">Cases</div>
<div class="column">Bottles</div>
<div class="column">Counted</div>
</div>
<?php
// grab all the pertinant entries from the database and create a row of entries for each one
$sql="SELECT BatchNum, BatchName, UPC FROM Batches WHERE CurrentBatch=1 AND UPC <> '' ORDER by BatchNum DESC";
$result = $mysqli->query($sql);
$numrows = $result->num_rows;
if ($result->num_rows > 0) {
$row_cnt = 0;
while ($row = $result->fetch_assoc()) {
echo '<div class=row>';
echo '<div class=column>'.$row['BatchNum'].'</div>';
echo '<div class=column>'.$row['BatchName'].'</div>';
echo '<div class=column>'.$row['UPC'].'</div>';
echo '<div class=column> <label for="CaseCount"></label><input type="text" inputmode="numeric" pattern="^\d{1,3}$" size="4" class="form-control" id="CaseCount'.$row_cnt.'" name="CaseCount'.$row_cnt.'" value="" ></div>';
echo '<div class=column> <label for="BottleCount"></label><input type="text" inputmode="numeric" pattern="^\d{1,3}$" size="4" class="form-control" id="BottleCount'.$row_cnt.'" name="BottleCount'.$row_cnt.'" value=""></div>';
echo '<div class=column> <label for="Counted"></label><input type="text" inputmode="numeric" pattern="^\d{1,8}$" size="8" class="form-control" id="Counted'.$row_cnt.'" name="Counted'.$row_cnt.'" value="" required></div>';
$row_cnt += 1;
echo "</div>";
}
}
?>
</div>
</li>
</ul>
</div>
</form>
<script>
// monitor the case and bottle count fields and update the counted field.
$(document).ready(function() {
$('#CaseCount0, #BottleCount0').on('input', function() {
var Counted0 = 0;
var value1 = $('#CaseCount0').val();
var value2 = $('#BottleCount0').val();
var Counted0 = (value1 * 12) + (value2 * 1);
$('#Counted0').val(Counted0);
});
$('#CaseCount1, #BottleCount1').on('input', function() {
var Counted1 = 0;
var value1 = $('#CaseCount1').val();
var value2 = $('#BottleCount1').val();
var Counted1 = (value1 * 12) + (value2 * 1);
$('#Counted1').val(Counted1);
});
$('#CaseCount2, #BottleCount2').on('input', function() {
var Counted2 = 0;
var value1 = $('#CaseCount2').val();
var value2 = $('#BottleCount2').val();
var Counted2 = (value1 * 12) + (value2 * 1);
$('#Counted2').val(Counted2);
});
// might be 20-30 of these lines
});
</script>
here is a script section I have tried, but could not get to work, I do not think it is good practice for the function to be inside the loop:
var numrows = <?php echo $numrows ?>-1;
var i;
$(document).ready(function() {
for(var i = 0; i <= numrows; i++) {
$("#CaseCount"+i).on('input', function() {
this["Counted"+i] = 0;
var value1 = $("#CaseCount" + i).val();
var value2 = $("#BottleCount" + i).val();
$("#Counted"+i).val((value1 * 12)+(value2 * 1));
});
}
});