JSFiddle - React, Tailwind, and code Playground

HTML

<H1>Bind Context 1</H1>
<input id='a' data-bind='data.test' placeholder='Button Text' />
<input id='b' data-bind='data.test' placeholder='Button Text' />
<input type=button id='c' data-bind='data.test' />
<H1>Bind Context 2</H1>
<input id='d' data-bind='data.otherTest' placeholder='input bind' />
<input id='e' data-bind='data.otherTest' placeholder='input bind' />
<input id='f' data-bind='data.test' placeholder='button 2 text - same var name, other context' />
<input type=button id='g' data-bind='data.test' value='click here!' />
<H1>No bind data</H1>
<input id='h' placeholder='not bound' />
<input id='i' placeholder='not bound'/>
<input type=button id='j' />

JavaScript

(function(){
	if ( ! ( 'SmartBind' in window ) ) { // never run more than once
		// This hack sets a "proxy" property for HTMLInputElement.value set property
		var nativeHTMLInputElementValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
		var newDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
		newDescriptor.set=function( value ){
			if ( 'settingDomBind' in this )
				return;
			var hasDataBind=this.hasAttribute('data-bind');
			if ( hasDataBind ) {
				this.settingDomBind=true;
				var dataBind=this.getAttribute('data-bind');
				if ( ! this.hasAttribute('data-bind-context-id') ) {
					console.error("Impossible to recover data-bind-context-id attribute", this, dataBind );
				} else {
					var bindContextId=this.getAttribute('data-bind-context-id');
					if ( bindContextId in SmartBind.contexts ) {
						var bindContext=SmartBind.contexts[bindContextId];
						var dataTarget=SmartBind.getDataTarget(bindContext, dataBind);
						SmartBind.setDataValue( dataTarget, value);
					} else {
						console.error( "Invalid data-bind-context-id attribute", this, dataBind, bindContextId );
					}
				}
				delete this.settingDomBind;
			}
			nativeHTMLInputElementValue.set.bind(this)( value );
		}
		Object.defineProperty(HTMLInputElement.prototype, 'value', newDescriptor);

	var uid= function(){
           return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
               var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
               return v.toString(16);
          });
   }

		// SmartBind Functions
		window.SmartBind={};
		SmartBind.BindContext=function(){
			var _data={};
			var ctx = {
				"id" : uid()	/* Data Bind Context Id */
				, "_data": _data		/* Real data object */
				, "mapDom": {}			/* DOM Mapped objects */
				, "mapDataTarget": {}		/* Data Mapped objects */
			}
			SmartBind.contexts[ctx.id]=ctx;
			ctx.data=new Proxy( _data, SmartBind.getProxyHandler(ctx,...