Scores of students adding up on one student's total score

Question

There is a section in my school web app that allows me to add scores for all students of a specific class at once. I recently added some codes that automatically calculates the sum of input values with javascript.

It works fine. Problem is, scores of all students are been added up as one to just one student at the top.

Please see image below

I want each student to have their own total score.

<?php }elseif($class_id >= 15 && $class_id <= 17){ ?>
<form action="<?php echo site_url('admin/mtprimary/assigngradeActionMT') ?>" method="POST" id="formSubjectTeacher">
<?php echo $this->customlib->getCSRF(); ?>
<div class="row">
<div class="col-lg-3">
<input type="hidden" name="class" value="<?php echo $class_id; ?>">
<input type="hidden" name="subject_id" value="<?php echo $subject_id; ?>">
</div>
<div class="col-lg-4">                                       
<h4><strong><?php echo $session_name; ?></strong></h4>
</div>
</div>
<br>
<hr>

<?php foreach($students as $student){?>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>Student Name</label>
<input type="hidden" name="number[]"  value="">
<input type="hidden" name="section_id"  value="<?php echo $section_id; ?>">
<input type="hidden" name="session_id[]"  value="<?php echo $student->session_id; ?>">
<input type="hidden" name="student_id[]"  value="<?php echo $student->student_id; ?>">
<input type="hidden" name="class_id[]" value="<?php echo $class_id; ?>">
<input type="text" value="<?php echo $CI->GetStudentNameWithID($student->student_id); ?>" class="form-control "  readonly>
</div>
</div>
<div class="col-lg-1">
<label>Test1 </label>
<input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
input type="number" name="mt_ca1[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="t2">
<label>Test2</label>
<input type="number" name="mt_ca2[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1" id="assg">
<label>Test3</label>
<input type="number" name="mt_ca3[]"  class="form-control input-sm rounded-0" value="0">
</div>
<div class="col-lg-1">
<label>Total</label>
<output id="result"></output>
</div>
</div>

<script>
const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  $inputs.each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

</script>

Answer 1

The attribute id must be unique in a document, use class instead. First change the HTML with class.

From

<output id="result"></output>

To

<output class="result"></output>

In jQuery Change

$('#result').html(total);

To

$(this).parent().next().find('.result').text(total);

Please Note: It is good practice to use text() instead of html() if the the text is plain string (not htmlString).

I will also prefer input event instead of change to output the immediate changes by changing

$inputs.change(function() {

To

$inputs.on('input', function() {

Answer 2

As has been pointed out, you have multiple elements with an id of result which is not allowed, you should use a class of result instead. But your main problem is that you need to qualify the inputs that you sum to get the total score for a student. You can do this by finding the parent div with class row for the input which changes, and then only sum the inputs that are children of that div. You can then store the total to the result output which is a child of that div:

const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  var parent = $(this).closest('.row');
  parent.find('input[type="number"]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  parent.find('.result').html(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="1">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Bill" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label>Student Name</label>
      <input type="hidden" name="number[]" value="">
      <input type="hidden" name="section_id" value="1">
      <input type="hidden" name="session_id[]" value="5">
      <input type="hidden" name="student_id[]" value="2">
      <input type="hidden" name="class_id[]" value="1">
      <input type="text" value="Mary" class="form-control " readonly>
    </div>
  </div>
  <div class="col-lg-1">
    <label>Test1 </label>
    <input type="hidden" name="session_id[]" value="<?php echo $sessionID; ?>">
    <input type="number" name="mt_ca1[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="t2">
    <label>Test2</label>
    <input type="number" name="mt_ca2[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1" id="assg">
    <label>Test3</label>
    <input type="number" name="mt_ca3[]" class="form-control input-sm rounded-0" value="0">
  </div>
  <div class="col-lg-1">
    <label>Total</label>
    <output class="result"></output>
  </div>
</div>