JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div id='ContentContainer'>
Experience Multiple Dialogs
    <ul>
        <li>Click "Open Dialog"</li>
        <li>Move the dialog out of the center and notice only 1 dialog</li>
        <li>Close Dialog</li>
        <li>Now click "One" and "Two" buttons back and forth a few times</li>
        <li>Now click "Open Dialog"</li>
        <li>Move the dialog and observe the multiple dialogs</li>        
    </ul>
    <button data-bind="click:showOne">One</button>
    <button data-bind="click:showTwo">Two</button>
    
    <!-- ko if: templateOne -->
    <div data-bind="template:{name:'template-one'}"></div>
    <!-- /ko -->
    <!-- ko if: templateTwo -->
    <div data-bind="template:{name:'template-two'}"></div>
    <!-- /ko -->
</div>

<script type="text/html" id="template-one">
    <h3>Template #1</h3>
    <p data-bind="text:content"></p>
    
    <div><input type= "checkbox" data-bind="checked:templateOneHasDialog" /> Has Dialog </div>
        
    <button data-bind="click:openDialog">Open Dialog</button>
        
    <!-- ko if: templateOneHasDialog -->
    <div id="DesiredDivID"></div>
    <div id="dlg" data-bind="dialog:diagOpt, dialogVisible:open">
        The Amazing Dialog!
     </div>

         <!-- /ko -->
        
</script>

<script type="text/html" id="template-two">
    Template #2
</script>

JavaScript

(function () {
    ko.bindingHandlers.dialog = {
        init: function (element, valueAccessor, allBindingsAccessor) {
      
           var $el = $(element);
           console.log($el);
 var options = ko.utils.unwrapObservable(valueAccessor()) || {};
           
            setTimeout(function () {
                options.close = function () {
                    allBindingsAccessor().dialogVisible(false);
                };            
                $(element).dialog(options);
            }, 0);
            //handle disposal (not strictly necessary in this scenario)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {                
                $el.dialog("destroy");
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
             
            var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
                $el = $(element),
                dialog = $el.data("uiDialog") || $el.data("dialog");

            //don't call open/close before initilization
            if (dialog) {
                $el.dialog(shouldBeOpen ? "open" : "close");
            }
        }
    }
})();


$(function () {

    var vm = {
        open: ko.observable(false),
        content: ko.observable('Nothing to see here...'),
        templateOne: ko.observable(true),
        templateTwo: ko.observable(false),
        
        templateOneHasDialog: ko.observable(true),
        showOne: function(){
            this.templateTwo(false);
            this.templateOne(true);
        },
        showTwo: function(){
            this.templateOne(false);
            this.templateTwo(true);
        },

        diagOpt: {
            autoOpen: false,
            position: "center",
            modal: true,
            draggable: true,
            width: 'auto',
            appendTo: "#DesiredDivID"
        },
        openDialog: function () {
            if(this.templateOneHasDialog()){   ...