Below is my HTML code to open oj-dialog

<div id="dialogWrapper">
    <div style="display:none" id="modalDialog1" title="Modal Dialog" data-bind="ojComponent:{component: 'ojDialog',
                                 initialVisibility: 'hide',
                                 open: dialogOpen,
                                 close: dialogClose,
                                 rootAttributes: {
                                   class: 'animate'
                                 }}">
      <div class="oj-dialog-body">
        The dialog window can be moved, resized and closed with the 'x' icon.
        Arbitrary content can be added to the the oj-dialog-body and oj-dialog-footer sections.
      </div>
      <div class="oj-dialog-footer">
        <button id="okButton" data-bind="click: closeDialog,
                                           ojComponent: {component: 'ojButton',
                                                         label: 'OK'}"> </button>
      </div>
    </div>
    <button id="buttonOpener" data-bind="click: openDialog,  
                                         ojComponent: {component: 'ojButton',
                                                       label: 'Open Modal Dialog'}"></button>

  </div>

Below is my corresponding js code :

define(['require', 'exports', 'knockout', 'ojs/ojbootstrap', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojdialog'],
function(ko, oj, $) {
  'use strict';

  var ViewModel = function() {
    var self = this;

    self.openDialog = function() {
      $("#modalDialog1").ojDialog("open");
    };
    
    self.closeDialog = function(data, event) {

            // attempt fadeOut with jQuery
      $(event.target)
        .closest(".oj-dialog.animate")
        .fadeOut(function() {
          console.log("faded out", this);
          $("#modalDialog1").ojDialog("close");
        });
      };

    self.dialogOpen = function(event, ui) {
      $(event.target)
        .closest(".oj-dialog.animate")
        .addClass("fully-opaque");
    };

    self.dialogClose = function(event, ui) {
      $(event.target)
        .closest(".oj-dialog.animate")
        .removeClass("fully-opaque");
    };

  };

  ko.applyBindings(new ViewModel());
});

When I run this code I am getting "Error: You cannot apply bindings multiple times to the same element." error. I am new to development and as per document I have added all libraries. Can Anyone see where its going wrong.