Dialog method supported in one page but not in another

I have 2 .NET web pages that have the same popup box in both pages The JavaScript is exactly the same in both pages, I copied the code from the page that works to the other page and it doesn't work. the one that doesn't work gives me the error message:

Scripts/jquery-3.3.1.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.  

I have tried putting the code at the end of the page, no difference. Best I can tell jquery is being load into the page in the header when I check the page with the IE developer. Hope someone can point me in the right direction.

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link  href ="~/Styles/Default.css"  rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script>
    $(document).ready(function() {
        $("#dd2875").dialog({
            buttons: {
                "Cancel": function() {
                    $("#dd2875").dialog('close');
                }
            },
            dialogClass: 'myTitleClass',
            draggable: false,
            width: 800,
            height: 400,
            hide: 2000,
            show: 'slidedown',
            hide: 'explode',
            autoOpen: false
        });

        $("#btnNewAccount").click(function(evt) {
            evt.preventDefault();
            $("#dd2875").dialog('open');
        });
    });
</script>

The DOM probably does not contain an element with the ID dd2875,

Verify that #dd2875 actually exists on the page at the point that you are calling dialog()