Laravel + JS – modal messages conflict

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:

var myConfirm = document.getElementById("myConfirm");


var confirmBtn = document.getElementById("confirmBtn");


var cancel = document.getElementsByClassName("cancel")[0];

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


cancel.onclick = function() {
  myConfirm.style.display = "none";
}


window.onclick = function(event) {
  if (event.target == myConfirm) {
    myConfirm.style.display = "none";
  }
}

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


var closeBtn = document.getElementsByClassName("modal-btn")[0];


closeBtn.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}