Custom modal - script not working on next modal after form submit

Hello, i'm using Laravel 9 and i have some buttons that need the user confirm. For example the user clicks on 'confirm order' a modal appears with message and two more buttons - cancel, confirm. If the user clicks on 'confirm' the form will be submitted and another modal message will pop out : 'Order confirmed' with button 'ok'. The 'Ok' button for closing the widnow of second modal is not working. I don't use often JS, can somebody tell me what's wrong in the code?

view confirm form and modal:

                @if ($grid_data->first()->stato_ordine == 0) 
                <div>
                    <button id="confirmBtn" class="btn btn-success me-3"><i class="fa-regular fa-circle-check me-2"></i>Conferma Ordine</button>
                </div>
                    <!-- The Modal -->
                    <div id="myConfirm" class="custom-confirm">
                        <!-- Modal content -->
                        <div class="modal-content text-center">
                            <p>Sei sicuro di voler confermare l'ordine?</p>                            
                            <form class="confirm-form" action="{{route('ordini.update', $grid_data->first()->id)}}" method="POST">
                                @csrf
                                @method('PATCH')
                                <input type="number" value="1" name="conferma_ordine" hidden>
                                <button type="submit" class="btn btn-success me-3">Conferma</button>
                                <span class="cancel btn btn-warning">Annulla</span>
                            </form>
                        </div>
                    </div>
                @endif

User clicks confirm and this pops out:

        @if(session()->has('status'))
        <!-- The Modal -->
            <div id="myModal" class="custom-modal">
                <!-- Modal content -->
                <div class="modal-content shadow-success">
                <div class="text-center">
                    <p class="text-success fs-5">{{ session()->get('status') }}</p>
                    <i class="fa-regular fa-circle-check text-success fs-1 d-block"></i>
                    <button class="modal-btn btn btn-success mt-4">Ok</button>
                </div>
                </div>
            </div>
        @endif

JS:

// Get the modal
var myConfirm = document.getElementById("myConfirm");

// Get the button that opens the modal
var confirmBtn = document.getElementById("confirmBtn");

// Get the button element that closes the modal
var cancel = document.getElementsByClassName("cancel")[0];

// When the user clicks on the button, open the modal
confirmBtn.onclick = function() {
  myConfirm.style.display = "block";
}

// When the user clicks on close the modal
cancel.onclick = function() {
  myConfirm.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == myConfirm) {
    myConfirm.style.display = "none";
  }
}

var modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
var closeBtn = document.getElementsByClassName("modal-btn")[0];

// When the user clicks on <closeBtn> , close the modal
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}