Ajax multiple forms and page reload?

Question

JavaScript

Point out the mistake
I am making a section for editing technical specifications

spoiler

Output in a template

while ($specifications = mysqli_fetch_array($result)) {
                        $i++;
                        ?>
                        <tr>
                          <td><?=$specifications_array[$specifications['specification_id']]?></td>
                          <td>
                            <form id="editSpecification-<?=$tovar_id?>" action="<?=$_SERVER['PHP_SELF']?>?tovar_id=<?=$tovar_id?>" method="POST">
                              <input type="hidden" name="specification_id" id="specification_id<?=$i?>" value="<?=$specifications['specification_id']?>">
                              <input type="hidden" name="tovar_id" id="tovar_id" value="<?=$tovar_id?>">
                              <input type="text" name="specification_value" id="specification_value<?=$i?>" value="<?=$specifications['value']?>">
                              <input type="number" name="specification_value_sort" id="specification_value_sort<?=$i?>" value="<?=$specifications['sort']?>">
                              <button type="submit" name="sendSpecification<?=$i?>" id="sendSpecification<?=$i?>" class="btn btn-primary">Сохранить</button>
                            </form>
                            <span id="result"> </span>
                          </td>
                        </tr>
                      <?php
                      }

$("#editSpecification-<?=$tovar_id?>").submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/../admin/ajax/editProductSpecif.php",
            data: $("#editSpecification-<?=$tovar_id?>").serialize(),

            success: function(data){
            	if(data == 1){ 
                  toastr.success('Характеристика изменена!');  
          } else {
            $("#result").html('<div class="alert alert-danger alert-dismissible" role="alert"><div class="alert-message"> Ошибка!</div></div>');  
          }
        }
      });
    });

If you edit the first value, then everything is fine, but if you edit the second and subsequent ones, then the page simply reloads

Answer 1

Oh oh oh...

$("#editSpecification-<?=$tovar_id?>").submit(function(e){...

here you hung a listener on ONE specific form element, since here you don’t have a cycle! Replace the selector with form or the form class. Inside, respectively, you can easily get this particular form as $(this), actually serealize it and that's it, profit!

and if you edit the second and subsequent ones, then the page simply reloads

this is understandable, since a listener is not hung on them, the form normally submits so-so, there is no preventDefault on it ...