jquery - Pass data from one modal to another using PHP and ajax

I need to create a double modal validation for printing a credit note for an invoice.

The steps go like this:

The user chooses the invoice from the invoice list html table by pressing a button that has the invoice id as value, which activates the first modal, that contains the id of the invoice in a hidden field , and the amount that wants to be refunded, with default value the total amount of the invoice (can change the value with any amount he wants).

As soon as the user hits proceed, the 1st modal closes, and the 2nd modal should pop up with the validation message if the user is sure that he wants to perform the action, which if he presses yes then the program goes to the page where the credit note is created.

Invoice List Code in page ->invoice_list.php

 $today = date("Y-m-d");

 $getDoc="SELECT * FROM documents                                   
  WHERE document_type = 4 AND document_print_date ='$today' ;";
  
  //(document_type=4 -> type for invoices)
  
  $resultGetDoc=mysqli_query($conn,$getDoc);
  if(mysqli_num_rows($resultGetDoc) > 0)
  {
    while($rowDoc=mysqli_fetch_array($resultGetDoc))
    {
      $documentNo=$rowDoc['document_enumeration']; //document enumaration field
      $documentId=$rowDoc['document_id']; //document id field

      echo"
       <tr>  
          <td>$documentId</td>
          <td>$documentNo</td>
          
          echo" <td><a href='../invoices_receipts/dompdf.php?reservationId=$reservationId & docId=$documentId '><img src =../images/logo/print.png  class='max-h-25px'/></a></td>

          <td class='text-center'><input type='button' name='view' value='Credit Note' id='$documentId' class='btn btn-default text-primary text-center popupBtn'></td>
       </tr>"; 
} //end while
Copy code

The 1st modal in invoice_list.php:

<div class="modal fade w-100" id="invoiceModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered " role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i aria-hidden="true" class="ki ki-close"></i>
            </button>
        </div>
        <div class="modal-body" id="invoice_detail">

      
        </div>
        <div class="modal-footer">      
            <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>   
            <input type='button' name='view' value='Procceed ' id='$documentId' class='btn btn-default text-primary text-center validationBtn'>            
        </div>
   
    </div>
</div>
Copy code

script for 1st modal which shows modal body content in page -> invoice_list_modal_content.php

<script>
  $(document).ready(function(){
    $('.popupBtn').on('click',function(){

      var document_id=$(this).attr("id");

      $.ajax({
        url:"invoice_list_modal_for_credit_note.php",
        method:"post",
        data:{document_id:document_id},
        success:function(data){
          $('#invoice_detail').html(data);
          $('#invoiceModal').modal('show');
        }
      });
    
    });
  });
</script>Copy code