JSFiddle - React, Tailwind, and code Playground

by habla

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
   var $jq321 = jQuery.noConflict();
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
   var $jq191 = jQuery.noConflict();
</script>

<div id="widget1"></div>
<div id="widget2"></div>

JavaScript

const widget_environment_1 = new Proxy({}, {
  has() { return true },
  get: function (target, name){
    if (name === '$') return $jq191
    return undefined;
  }
});

const widget_environment_2 = new Proxy({}, {
  has() { return true },
  get: function (target, name){
    if (name === '$') return $jq321
    return undefined;
  }
});

with (widget_environment_1) {
  $('#widget1').text(`I am widget1, using JQ: ${$.fn.jquery}`);
}

with (widget_environment_2) {
  $('#widget2').text(`I am widget2, using JQ: ${$.fn.jquery}`);
}