title: Edit button inside table row only works in consecutive order
body: <p>I am using php and javascript in order to display data from mysql in a table where each row must have an update button. </p>
  
  <p>It seems to be working fine but i'm getting a weird behavior: it works when i click the buttons in consecutive order (#1 then #2 then #3..) but when i click them randomly (starting with #2 or #3...) it does nothing, just reloads the page.</p>
  
  <p>Can you help me find what am i doing wrong, here's my code so far...
  Thanks!</p>
  
  <p>list.php:</p>
  
  <pre><code>&lt;?php
      $q= "SELECT * FROM list WHERE id = $f ORDER BY id";
  
      if ($query = mysqli_query($db_con, $q)) {
          $y=1;
          echo '&lt;table&gt;'.
          '&lt;tr&gt;'.
          '&lt;th&gt;#&lt;/th&gt;'.
          '&lt;th&gt;Name&lt;/th&gt;'.
          '&lt;th&gt;Edit&lt;/th&gt;'.
          '&lt;/tr&gt;';
  
          while ($reg= mysqli_fetch_row($query)){
              echo '&lt;tr&gt;';
              echo '&lt;td&gt;'.$y.'&lt;/td&gt;';
              echo '&lt;td&gt;'.$reg[0].'&lt;/td&gt;';
              echo '&lt;td&gt;
              &lt;form id="frm_data'.$y.'" method="post"&gt;
              &lt;input type="hidden" id="name" name="name" value="'.$reg[0].'" /&gt;
              &lt;input type="hidden" id="f" name="f" value="'.$f.'" /&gt;
              &lt;input type="hidden" id="a" name="a" value="'.$a.'" /&gt;
              &lt;input id="FormSubmit" type="submit" value="EDIT"&gt;
              &lt;/form&gt;
              &lt;/td&gt;&lt;/tr&gt;';
              $y = $y +1;
          }
          echo '&lt;/table&gt;';
      }
  ?&gt;
  </code></pre>
  
  <p>validate.js</p>
  
  <pre><code>$(document).ready(function() {
      $("#FormSubmit").click(function (e) {
              e.preventDefault();
  
              $("#FormSubmit").hide();
  
              var myData = {
                  name: $("#name").val(),
                  a: $("#a").val(),
                  f: $("#f").val()    
              };
  
              jQuery.ajax({
                  type: "POST", // HTTP method POST or GET
                  url: "update.php", //Where to make Ajax calls
                  dataType:"json", // Data type, HTML, json etc.
                  data:myData, //Form variables
  
                  success : function(data) {
                      if(data.status == 'success'){
                          alert("OK!");
                      } else if(data.status == 'error') {
                          alert("ERROR!");
                      }
                  },
                  error : function (xhr, ajaxOptions, thrownError){
                      alert(thrownError);
                  }
              });
      });
  });
  </code></pre>
  
  <p>update.php</p>
  
  <pre><code>&lt;?php
  $f = $_POST["f"];                           
  $name = $_POST["name"]; 
  $q = "UPDATE list SET edited = '1' WHERE id = '$f' AND name = '$name'   ";
  
  $update_row = mysqli_query($db_con, $q);
  
  if (!$update_row) {
      $response_array['status'] = 'error';   
  } else {
      $response_array['status'] = 'success'; 
  }
  ?&gt;
  </code></pre>