Dialog Clearing

Hi
I am using a dialog to confirm payment, when user (Cashier) select order to settle, I used dialog Content and Button to display final values to confirm payment as follows:

self.$app.dialog.create({

    title: 'Transaction',
    text: 'setteling order',
    destroyOnClose: true,
    content: '///here goes due values and balance',

    buttons: [
        {text: 'Close', bold: true, color: 'green',}, // payment button with index 0
        {text: 'Close & Print', bold: true, color: 'orange',},
        {text: 'Cancel', bold: true, color: 'red'},
    ],
    verticalButtons: true,
    onClick: function(dialog,index){
 
        if(index == 0 ){

            self.makePayment(orderIDs)
            
        }
       
        
    },
    on: {
        dialogClosed: function(dialog) {
            dialog.destroy();
        },
    },
    
})
dialog.open(dialog)

Now, every thing works fine except that after settling the order, close the dialog and select other order to settle, the previous orders dialog appear first though I have destroyed it explicitly. after I close it again only the selected order dialog appeared, what could be the problem for this dialog to appear twice though destroyed?
thanks

This is not needed:

on: {
        dialogClosed: function(dialog) {
            dialog.destroy();
        },
    },

as you already have destroyOnClose.

For the main issue would be good to see mo relevant code on how/where you open/create this dialog

Thanks a lot, After several attempts I decided to convert the Dialog to f7 page because it is complicated and have multiple functionalities