title: Form return by ajax not sending correct id
body: <p>I'm returning a form for each row in a table via ajax. I did it so that I can insert records <strong>specific to a student id</strong> on each row. This is how the form looks when it is return by ajax:
  <a href="https://i.stack.imgur.com/d4dqI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d4dqI.png" alt="enter image description here"></a></p>
  
  <p><strong>Problem is</strong> when the form is returned and I tried to insert a score for the first student <strong>Ralph T. Hensley</strong> I get the correct <code>id</code> of that student. But when I tried to insert a score for the remaining student I get the <code>id</code> for <strong>Ralph T. Hensley</strong> which is <code>7</code></p>
  
  <p>I'm correctly displaying the distinct ids of each student, but it seems like whenever I click the save button it only returns the id of the first student in the result set. Structure of my code is below.</p>
  
  <p>This is how I'm returning my form via ajax.</p>
  
  <pre><code>$output .= '&lt;tbody&gt;';
              if (mysqli_num_rows($result) &gt; 0) {
                      while ($row = mysqli_fetch_array($result)) {
                          # code...
                              // unseen fields values that will be send
                          $output .= '&lt;form action="#" method="post" class="st_score_form"&gt;';
                              $output .= '&lt;tr&gt;';
                                  $output .= '&lt;td&gt;
                                      &lt;input type="number" class="student_set" name="student_id" value="'.$row['student_id'].'"&gt;
                                      &lt;/td&gt;';
                                  $output .= '&lt;td style="display:none;"&gt;
                                      &lt;input type="text" class="subject_set" name="subject" value="'.$subject_id.'"&gt;
                                      &lt;/td&gt;';
                                  $output .= '&lt;td style="display:none;"&gt;
                                      &lt;input type="number" class="class_set" name="class_id" value="'.$class_id.'"&gt;&lt;/td&gt;';
                                  $output .= '&lt;td style="display:none;"&gt;&lt;input type="text" name="term" value="'.$term.'"&gt;&lt;/td&gt;';
                                  $output .= '&lt;td&gt;'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'&lt;/td&gt;';
                                  $output .= '&lt;td&gt;&lt;input type="number" class="score_set" min="59" max="100"  name="score" class="form-control" required="required"&gt;&lt;/td&gt;';
                                  $output .= '&lt;td&gt;&lt;input type="submit" name="savebtn" value="Save" class="btn btn-info form-control savebtn"&gt;&lt;/td&gt;';
                              $output .= '&lt;/tr&gt;';
                              // -- end of unseen fields
                          $output .= '&lt;/form&gt;';
                      }
          $output .= '&lt;/tbody&gt;';
  </code></pre>
  
  <p>This is my script:</p>
  
  <pre><code>$(document).on('click', '.savebtn', function(event) {
      event.preventDefault();
  
      var student = $('.student_set').val();
      var student_class = $('.class_set').val();
      var subject = $('.subject_set').val();
      var score = $('.score_set').val();
  
      console.log("Student " +student);
      console.log("Class " +student_class);
      console.log("subject " +subject);
      console.log("Score " +score);
  
      if (student != null &amp;&amp; student_class != null &amp;&amp; subject != null &amp;&amp; score != null) {
        $.ajax({
          url:"includes/ajax/create_score.php",
          method:"post",
          data:{"student":student, "class":student_class, "subject":subject, "score":score},
          dataType:"text",
          success:function(data){
            $("#success").fadeIn('slow', function(){       
               $("#success").html('&lt;div class="alert alert-info alert-dismissible"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&lt;i class="glyphicon glyphicon-remove-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;b&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;Alert! &lt;/b&gt;'+data+'&lt;/div&gt;');
             });
          }
        });
      } else {
        $("#result").html('');
      }
  
  
  });
  $('body').append('&lt;button class="savebtn"&gt;&lt;/button&gt;');
  </code></pre>
  
  <p>I'm open to feed backs and suggestions on ways I can make this work. Thanks!!!</p>