How to set up AJAX call for multiple buttons in a table

Question

I have a table in which I want user to fill the the data in input field if the condition is met and if the condition is false then the input field is disabled.
I have a input tag with submit attribute in each row. I'm giving onClick() to each submit to the ajax function below.
The error here is that only the first submit works as expected rest all the buttons are not working.
Can anyone help me out?

    <table> 
     <?php for($i=0; $i < $count; $i++){ ?>
       <tr>
        <td><?php echo $student_name[$i]; ?>
        <input type='hidden' id='student_id' value='<?php echo $student_id[$i]; ?>'>
        <input type='hidden' id='class_id' value='<?php echo $class_id; ?>'>
        <input type='hidden' id='phase' value='<?php echo $phase; ?>'>
        </td>

        <td>
          <?php if($studnet_p1_a1[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" placeholder='08.01' >
          <?php } ?>
        </td>
        <td>
          <?php if($studnet_p1_a2[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" placeholder='11' >
          <?php } ?>
        </td>
        <td><input type="submit" name="submit" onclick="ajax($(this));return false;" id="<?php echo $i?>" style="width:70px" class="button form-control mb" class="btn btn-success" value="Submit"></td>
      </tr>
     <?php endfor; ?>
    </table>

    <script>

    function ajax($this) {
      var a1 = $("input#a1").val();
      var a2 = $("input#a2").val();

      var student_id = $("input#student_id").val();
      var class_id = $("input#class_id").val();
      var phase = $("input#phase").val();
      var datastring = 'a1=' + a1 + '&a2=' + a2 + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

      $.ajax({
            type: "POST",
            url: "score_process.php",
            data: datastring,
            success: function(){              
            }
      });
     }

     </script>

Answer 1

You're not using <form>, try to change the <input> to <button> with the onclick attribute without return statement, and remove type="submit".

$studnet_p1_a2[$i] should be student instead of studnet?

Also consider using a framework like Angular, React, Vue.js. They are more scalable than bare php.

Answer 2

Please check below code and try it:

<table> 
     <?php for($i=0; $i < $count; $i++){ ?>
       <tr>
        <td><?php echo $student_name[$i]; ?>
        <input type='hidden' class='student_id' value='<?php echo $student_id[$i]; ?>'>
        <input type='hidden' class='class_id' value='<?php echo $class_id; ?>'>
        <input type='hidden' class='phase' value='<?php echo $phase; ?>'>
        </td>

        <td>
          <?php if($studnet_p1_a1[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a1' class="form-control mb a1" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a1' class="form-control mb a1" placeholder='08.01' >
          <?php } ?>
        </td>
        <td>
          <?php if($studnet_p1_a2[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a2' class="form-control mb a2" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a2' class="form-control mb a2" placeholder='11' >
          <?php } ?>
        </td>
        <td><input type="submit" name="submit" style="width:70px" class="button form-control mb submit_btn" class="btn btn-success" value="Submit"></td>
      </tr>
     <?php endfor; ?>
    </table>

    <script>
        $(document).ready(function () {
            $('body').on('click', '.submit_btn', function(e){
                var a1 = $(this).closest('tr').find('.a1').val();
                var a2 = $(this).closest('tr').find('.a2').val();
                var a3 = $(this).closest('tr').find('.a3').val();
                var a4 = $(this).closest('tr').find('.a4').val();
                var a5 = $(this).closest('tr').find('.a5').val();
                var bmi = $(this).closest('tr').find('.student_id').val();
                var student_id = $(this).closest('tr').find('.student_id').val();
                var class_id = $(this).closest('tr').find('.class_id').val();
                var phase = $(this).closest('tr').find('.phase').val();
                var datastring = 'a1=' + a1 + '&a2=' + a2 + '&a3=' + a3 + '&a4=' + a4 + '&a5=' + a5 + '&bmi=' + bmi + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

                $.ajax({
                    type: "POST",
                    url: "score_process.php",
                    data: datastring,
                    success: function(){              
                    }
                });
            });
        });

     </script>