jquery ui dialog modal only opens once using class selector

Question

        $(".groomed").click(function() {
            var modal = $(".dash-modal", this).dialog({
                    height:400,
                    width:800,
                    modal:true,
                    autoOpen: false,
                    Cancel: function() {
                            $(".dash-modal", this).dialog("destroy");
                    }
            });
            console.log(modal);
            modal.dialog('open');
    });

I have gone threw all of the stack overflows and they all deal with a id selector and I need this to work with a class selector. Code is included above.

The console logs the following for the first click:

[div#ui-id-2.dash-modal info ui-dialog-content ui-widget-content, prevObject: e.fn.e.init[1], context: tr.groomed, selector: ".dash-modal", constructor: function, init: function…]

And this for the second: [prevObject: e.fn.e.init[1], context: tr.groomed, selector: ".dash-modal", constructor: function, init: function…]

So it looks like the entire functionality is being removed after the modal is closed, the api says to use destroy, I've tried that with both close: and cancel:

Please help, thanks!

Answer 1

  Cancel: function() {
                            $(".dash-modal", this).dialog("destroy");
                    }

by this you destroy the dialog box

close dialog box to use according to your requirement

 Cancel: function() {
                            $(".dash-modal", this).dialog("close");
                    }

reference dialog close and dialog destroy