JSFiddle - React, Tailwind, and code Playground

HTML

<div class='btn1'>Button1</div>
<div class='btn2'>Button2</div>
<p class='plain-text'> Two dialog's open, one behind the other. Please drag the top dialog to see the other dialog below.
</p>

CSS

.btn1,
.btn2 {
  background-color: grey;
  width: 200px;
  height: 20px;
  text-align: center;
  padding: 3px;
  margin-bottom: 5px;
  display: inline-block;
}

.plain-text {
  color: red;
}

.btnSave {
  float: right;
  width: 80px;
  height: 30px;
}

JavaScript

var Test = Test || {};
Test = {
  CustomClass: function(fnSave) {
    return {
      dialogElem: null,
      saveBtn: null,
      fnSave: fnSave
    }
  },
  Cache: function(obj, dialogElem) {
    obj.dialogElem = $(dialogElem);
    obj.saveBtn = $(dialogElem).find('.btnSave');
  },
  OpenDialog: function(option) {
    var that = this;
    var dynamicElem = '<div>Dialog' +
      '<input type="button" class="btnSave" value="Save"/>' + '</div>';

    var obj = new that.CustomClass(option);

    $(dynamicElem).dialog({
      open: function(event, ui) {
        that.Cache(obj, this);
      }
    });
    
    //obj is being passed to different functions. How can I avoid passing  it to each function but still have access to the obj in each of the functions below?

    that.BindEvents(obj);
    that.SampleFunc1(obj);
    that.SampleFunc2(obj);
  },

  BindEvents: function(obj) {
    obj.saveBtn.on('click', function() {
      obj.fnSave();
    });
  },
  SampleFunc1: function(obj) {
    //Need the obj here too
    //Some code
  },

    SampleFunc2: function(obj) {
    //Need the obj here too
    //Some code
  }
}


//Click Event for Button 1
$('.btn1').on('click', function() {

  Test.OpenDialog(function() {
    alert('First Dialog');
  });
});

//Click Event for Button 2
$('.btn2').on('click', function() {

  Test.OpenDialog(function() {
    alert('Second Dialog');
  });
});