Two Ajax Form on a single page with multiple items

Question

I can make an Ajax request as follows:

HTML

<div class="resultado_debito<?php echo $i ?>">
  <span class="ruim"><br>Inadiplente</span><br>

  <form method="post" id="quitar_debito<?php echo $i ?>" novalidate="novalidate">

   <input type="hidden" name="pagamento" value="sim"  class="pagamento">
   <input type="hidden" name="i" value="<?php echo $i ?>"  class="i">   
   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">
   <input type="submit" value="Quitar">     
</form>
</div>

Js Ajax

$(document).ready(function() {
    $("form").submit(function() {

        //Remove a palavra quitar_ e deixa somente "debitoX"
        const formID = $(this).attr('id').replace("quitar_", "");

        //Captura o elemento que sofreu o evento de "submit"
        const formDetails = $(this);

        $.ajax({
            type: "POST",
            url: 'enviar_pagamento.php',
            data: formDetails.serialize(),
            success: function (data) { 
                // Inserting html into the result div
                $('.resultado_'+formID).html(data);
            },
            error: function(jqXHR, text, error){
                // Displaying if there are any errors
                $('.resultado_'+formID).html(error);           
            }
        });
        return false;
    });
});

My question would be how I can put one more form on the same page with Ajax request for another file.

Note that the Form ID varies according to the database record ($i), because ajax runs on all bank records.

Answer 1

Example Suggestion:

$(document).ready(function() {
    $("form").submit(function(event ) {
        event.preventDefault();
        
        //Captura o elemento que sofreu o evento de "submit"
        const formDetails = $(this);
        var dataIdx = formDetails.getAttribute('data-idx');
        
        $.ajax({
            type: formDetails.getAttribute('method'),
            url: formDetails.getAttribute('action'),
            data: formDetails.serialize(),
            success: function (data) { 
                // Inserting html into the result div
                $('.resultado_debito'+dataIdx).html(data);
            },
            error: function(jqXHR, text, error){
                // Displaying if there are any errors
                $('.resultado_debito'+dataIdx).html(error);
            }
        });
        return false;
    });
});

<div class="resultado_debito<?php echo $i ?>">
  <span class="ruim"><br>Inadiplente</span><br>

  <form method="post" novalidate="novalidate" action="enviar_pagamento.php" method="post" data-idx="<?php echo $i ?>">

   <input type="hidden" name="pagamento" value="sim"  class="pagamento">
   <input type="hidden" name="i" value="<?php echo $i ?>"  class="i">   
   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">
   <input type="submit" value="Quitar">     
   <div class="resultado">
   </div>
</form>
</div>