diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 85f1e09f..90ebf2d5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -425,8 +425,10 @@ var $step = scopeQuery.scopeSelector(scope),
 This will return an object with a constructor which returns a `jQuery` object (from inside the scope) but with new `elem` and `elemAll` methods.
 
 #### Methods of the Returned Object
-* `elem()`: Selects an element inside the scope; 
-* `elemAll()`: Selects all the instances of a given element inside the scope;
+* `elem()`: Selects an element inside the scope.
+* `elemAll()`: Selects all the instances of a given element inside the scope.
+* `getScope()`: Returns the scope as a DOM element.
+* `getDomElem()`: Returns the scoped element as a DOM element instead of a jquery object.
 
 #### Example
 
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index 07cd8c99..88dd9694 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -8,15 +8,14 @@
 // output values, step information.
 // See documetation for more details.
 
-var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
+const intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
   urlHash = require('./urlHash.js'),
   _ = require('lodash'),
   mapHtmlTypes = require('./mapHtmltypes'),
-  scopeQuery = require('./scopeQuery'),
-  $stepAll,
-  $step;
+  scopeQuery = require('./scopeQuery');
 
 function DefaultHtmlStepUi(_sequencer, options) {
+  let $step, $stepAll;
 
   options = options || {};
   var stepsEl = options.stepsEl || document.querySelector('#steps');
@@ -74,8 +73,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     $step = scopeQuery.scopeSelector(step.ui);
     $stepAll = scopeQuery.scopeSelectorAll(step.ui);
+    step.ui.$step = $step;
+    step.ui.$stepAll = $stepAll;
 
-    step.linkElements = $stepAll('a');
+    step.linkElements = step.ui.querySelectorAll('a');
     step.imgElement = $step('a img.img-thumbnail')[0];
 
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -268,7 +269,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     $step('.load').hide();
 
     step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
-    var imgthumbnail = $step('.img-thumbnail');
+    var imgthumbnail = $step('.img-thumbnail').getDomElem();
     for (let index = 0; index < step.linkElements.length; index++) {
       if (step.linkElements[index].contains(imgthumbnail))
         step.linkElements[index].href = step.imgElement.src;
diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
index 65795c79..7fb64004 100644
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -65,41 +65,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
   }
 
 
-  function selectNewStepUi() {
-    //var insertSelect = $step('.insert-step-select');
-    var insertSelect = $(step.ui.querySelector('.insert-step-select'));
+  function selectNewStepUi($step) {
+    var insertSelect = $step('.insert-step-select');
     var m = insertSelect.val();
-    // $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
-    // $step('.insertDiv .add-step-btn').prop('disabled', false);
-    $(step.ui.querySelector('.insertDiv .info').html(_sequencer.modulesInfo(m).description));
-    $(step.ui.querySelector('.insertDiv .add-step-btn').prop('disabled', false));
+    $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
+    $step('.insertDiv .add-step-btn').prop('disabled', false);
   }
     
     
-  var toggleDiv = function(callback = function(){}){
-    /*$step('.insertDiv').collapse('toggle');
+  var toggleDiv = function($step, callback = function(){}){
+    $step('.insertDiv').collapse('toggle');
     if ($step('.insert-text').css('display') != 'none'){
-      $step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});*/
-
-    $(step.ui.querySelector('.insertDiv')).collapse('toggle');
-    if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
-      $(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
+      $step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback);});
     }
     else {
-      //$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
-      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
+      $step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback);});
     }
   };
 
   insertStep = function (id) {
+    const $step = step.ui.$step,
+      $stepAll = step.ui.$stepAll;
     var modulesInfo = _sequencer.modulesInfo();
     var parser = new DOMParser();
     var addStepUI = stepUI();
     addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
-
-    //if ($step('.insertDiv').length > 0){
-    if ($(step.ui.querySelector('.insertDiv')).length > 0){
-      toggleDiv();
+    if ($step('.insertDiv').length > 0){
+      toggleDiv($step);
     }
     else {
       step.ui
@@ -107,19 +99,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
         .insertAdjacentElement('afterend',
           addStepUI
         );
-      toggleDiv(function(){
+      toggleDiv($step, function(){
         insertPreview.updatePreviews(step.output, '.insertDiv');
       });
     }
 
-    /*$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
+    $step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){});});
     
-    var insertStepSelect = $step('.insert-step-select');*/
-
-    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
-    
-    //var insertStepSelect = $step('.insert-step-select');
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
     insertStepSelect.html('');
     // Add modules to the insertStep dropdown
     for (var m in modulesInfo) {
@@ -131,35 +118,30 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
     insertStepSelect.selectize({
       sortField: 'text'
     });
-    //$step('.inserDiv .add-step-btn').prop('disabled', true);
-    $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
+    $step('.inserDiv .add-step-btn').prop('disabled', true);
     
     insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
-    //$step('.insertDiv .radio-group .radio').on('click', function () {
-    $(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
+    $step('.insertDiv .radio-group .radio').on('click', function () {
       $(this).parent().find('.radio').removeClass('selected');
       $(this).addClass('selected');
       newStep = $(this).attr('data-value');
-      //$step('.insert-step-select').val(newStep);
-      $(step.ui.querySelector('.insert-step-select')).val(newStep);
-      selectNewStepUi();
-      insert(id);
+      $step('.insert-step-select').val(newStep);
+      selectNewStepUi($step);
+      insert(id, $step);
       $(this).removeClass('selected');
     });
-    insertStepSelect.on('change', selectNewStepUi);
-    //$step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
-    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
+    insertStepSelect.on('change', () => {selectNewStepUi($step);});
+    $step('.insertDiv .add-step-btn').on('click', function () { insert(id, $step); });
   };
 
-  function insert(id) {
+  function insert(id, $step) {
 
     options = options || {};
-    //var insertStepSelect = $step('.insert-step-select');
-    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
+    var insertStepSelect = $step('.insert-step-select');
     if (insertStepSelect.val() == 'none') return;
 
     var newStepName = insertStepSelect.val();
-    toggleDiv();
+    toggleDiv($step);
     var sequenceLength = 1;
     if (sequencer.sequences[newStepName]) {
       sequenceLength = sequencer.sequences[newStepName].length;
diff --git a/examples/lib/scopeQuery.js b/examples/lib/scopeQuery.js
index bf00cf3f..63b61fcd 100644
--- a/examples/lib/scopeQuery.js
+++ b/examples/lib/scopeQuery.js
@@ -1,6 +1,6 @@
 /**
  * @method $scope
- * @param {"DOMNode"} scope A DOM Node as the scope 
+ * @param {"DOMNode"} scope A DOM Node as the scope
  */
 function $scope(scope) {
   return function(queryString){
@@ -8,18 +8,22 @@ function $scope(scope) {
 
     element.elem = function(queryString){
       return new $scope(scope)(queryString);
-    }
+    };
     element.elemAll = function(queryString){
       return new $scopeAll(scope)(queryString);
-    }
+    };
+    element.getDomElem = function(i = 0){
+      return element[i];
+    };
+    element.getScope = () => scope;
 
     return element;
-  }
+  };
 }
 
 /**
  * @method $scopeAll
- * @param {"DOMNode"} scope A DOM Node as the scope 
+ * @param {"DOMNode"} scope A DOM Node as the scope
  */
 function $scopeAll(scope){
   return function(queryString){
@@ -27,19 +31,23 @@ function $scopeAll(scope){
 
     element.elem = function(queryString){
       return new $scope(scope)(queryString);
-    }
+    };
     element.elemAll = function(queryString){
       return new $scopeAll(scope)(queryString);
-    }
+    };
+    element.getDomElem = function(i = 0){
+      return element[i];
+    };
+    element.getScope = () => scope;
 
     return element;
-  }
+  };
 }
 
 /**
  * @method scopeSelector
  * @description A scoped jQuery selector
- * @param {"DOMNode"} scope DOM Node as the scope 
+ * @param {"DOMNode"} scope DOM Node as the scope
  */
 function scopeSelector(scope){
   return $scope(scope);
@@ -48,7 +56,7 @@ function scopeSelector(scope){
 /**
  * @method scopeSelectorAll
  * @description A scoped jQuery multiple selector
- * @param {"DOMNode} scope DOM Node as the scope 
+ * @param {"DOMNode} scope DOM Node as the scope
  */
 function scopeSelectorAll(scope){
   return $scopeAll(scope);
@@ -57,4 +65,4 @@ function scopeSelectorAll(scope){
 module.exports = {
   scopeSelector,
   scopeSelectorAll
-}
\ No newline at end of file
+};
\ No newline at end of file