Dialog Clearing

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:


    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 ){

    on: {
        dialogClosed: function(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?

This is not needed:

on: {
        dialogClosed: function(dialog) {

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