Grading with dropdowns with php and ajax - php

Question

I am currently making a system for a project. We need to create a grade calculator for the system.
I was stuck because I can only calculate the first set of data in the HTML table.
Grade Table
How can I change the other values? The data that is in the table is generated by PHP and that came from our database. I am just new to PHP, especially to ajax.
Here is the webpage:
?>
<select name="midterm" id="midterm" required class="form-control" onchange="DisableMenu()">
<?php
if($dblMidterm!="0.00"){
?>
<option value=" <?php echo $dblMidterm; ?> " selected> <?php echo $dblMidterm; ?> </option>
<?php
}
else{
?>
<option value="0.00">0.00</option>
<?php
}
?>
<option value="1.00">1.00</option>
<option value="1.25">1.25</option>
<option value="1.50">1.50</option>
<option value="1.75">1.75</option>
<option value="2.00">2.00</option>
<option value="2.25">2.25</option>
<option value="2.50">2.50</option>
<option value="2.75">2.75</option>
<option value="3.00">3.00</option>
<option value="5.00">5.00</option>
</select>
<?php
echo '</td>';
echo '<td>';
?>
<select name="finals" id="finals" required class="form-control">
<option value=" <?php echo $dblFinals; ?> "> <?php echo $dblFinals; ?> </option>
<option value="1.00">1.00</option>
<option value="1.25">1.25</option>
<option value="1.50">1.50</option>
<option value="1.75">1.75</option>
<option value="2.00">2.00</option>
<option value="2.25">2.25</option>
<option value="2.50">2.50</option>
<option value="2.75">2.75</option>
<option value="3.00">3.00</option>
<option value="5.00">5.00</option>
</select>
<?php
echo '</td>';
echo '<td>';
?>
<select name="overall" id="overall" disabled required class="form-control">
<?php
if($dblOverall!="0.00"){
?>
<option value=" <?php echo $dblOverall; ?> "> <?php echo $dblOverall; ?> </option>
<?php
}
else{
?>
<option value=" "></option>
<?php
}
?>
</select>
<?php
Here is the PHP part:
<?php
require_once('server.php');
?>
<?php
if(isset($_POST['dblmidterm'])&&isset($_POST['dblfinals'])){
$dblMidterm = mysqli_real_escape_string($objConn, $_POST['dblmidterm']);
$dblFinals = mysqli_real_escape_string($objConn, $_POST['dblfinals']);
$dblOverall = ($dblMidterm + $dblFinals)/2;
$dblOverall = number_format((float)$dblOverall, 2, '.', '');
echo '<option value="' . $dblOverall . '">' .$dblOverall. '</option>';
$dblMidterm = 0;
$dblFinals = 0;
}
?>
Here is the AJAX part:
$(document).ready(function() {
$("#midterm, #finals").change(function() {
var midterm = $("#midterm").val();
var finals = $("#finals").val();
if(midterm != "" && finals!= "") {
$.ajax({
url:"compute.php",
data:{dblmidterm:midterm,dblfinals:finals},
type:'POST',
success:function(response) {
var resp = $.trim(response);
console.log(midterm);
console.log(finals);
console.log(resp);
$("#overall").html(resp);
}
});
} else {
$("#overall").html("<option value=''> </option>");
}
});
});

Answer 1

The problem is you don't select specific selects, so JavaSript finds the first one.
You need to do some reading on this keyword.
var row = $(this).closest('tr'); //finds the row the select you used is in
var midterm = row.find('#midterm').val(); //finds the #midterm in that row
var finals = row.find('#finals').val(); //finds the #finals that row