jQueryUI: First Dialog() functions properly, second Dialog() in same event is undefined?

I have the following script in my MVC5 app which adds some text as the first option in all dropdowns on my View, and then if that option is selected (currently only coded for the first list) I do a modal popup to display a Create() Model partial view on top of my main Edit() view:

<script type="text/javascript">
        $(document).ready(function () {
            // Add the <<< ADD NEW >>> option to each drop down.
            $('select.dropdown').prepend('<option>' + "<<< ADD NEW >>>" + '</option');

            //
            $("select").change(function () {
                //alert("Selected dropdown value has changed."); // Working
                if ($("#Model_Id")[0].selectedIndex === 0) {
                    $("#createModelForm").dialog({
                        autoOpen: true,
                        position: { my: "center", at: "top+500", of: window },
                        width: 1000,
                        resizable: false,
                        title: 'Create Model',
                        modal: true,
                        open: function () {
                            $(this).load('@Url.Action("createModelPartialView", "INV_Assets")');
                        },
                        buttons: {
                            //"Create Model": function () {
                            //    addModelInfo();
                            //},
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                    return false;
                }

                if($("#Manufacturer_Id")[0].selectedIndex === 0) 
                {
                    alert("Manufacturer - Selected dropdown value has changed.");
                    // Open Manufacturer Create() View?
                }

                if ($("#Type_Id")[0].selectedIndex === 0) {
                    alert("Type - Selected dropdown value has changed.");
                    // Open Type Create() View?
                }
            });
        });
    </script>

I was first attempting to figure out how to alert the user that the Create operation was successful and then simply close the modal popup -- current controller method saves the new Model entered and then redirects completely to the partial view that previously was just a modal popup:

    // POST: INV_Models/Create
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<PartialViewResult> createModelPartialView([Bind(Include = "Id,model_description,created_date,created_by,modified_date,modified_by")] INV_Models iNV_Models)
    {
        iNV_Models.created_date = DateTime.Now;
        iNV_Models.created_by = "SETUP USER";
        iNV_Models.modified_date = DateTime.Now;
        iNV_Models.modified_by = "SETUP USER";

        if (ModelState.IsValid == false && iNV_Models.Id == 0)
        {
            ModelState.Clear();
        }

        if (ModelState.IsValid)
        {
            db.INV_Models.Add(iNV_Models);
            await db.SaveChangesAsync();
        }

        return PartialView("_createModelPartial");
    }

As I was trying to figure out a good Save-Alert/Close method, I noticed that my Cancel button is not functioning on the Modal popup. When I inspect the console in Chrome, I get Uncaught TypeError: undefined is not a function for 1:45, or $(this).dialog("close");.

Can anyone answer as to why my first dialog() that opens the actual modal popup functions, but the second dialog() that acts as a close request comes up as undefined?