JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind-123>
    <div><input bd="name" type="text" value="" /></div>
    <div><input bd="owner" type="text" value="" /></div>
    <div><input bd="type" type="text" value="" /></div>
</div>

JavaScript

function DataBinder( object_id ) {
  var pubSub = {
        callbacks: {},
        on: function( msg, callback ) {
          this.callbacks[ msg ] = this.callbacks[ msg ] || [];
          this.callbacks[ msg ].push( callback );
        },
        publish: function( msg ) {
          this.callbacks[ msg ] = this.callbacks[ msg ] || []
          for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) {
            this.callbacks[ msg ][ i ].apply( this, arguments );
          }
        }
      },
      data_attr = "data-bind-" + object_id,
      message = object_id + ":change",
      changeHandler = function( evt ) {
        var target = evt.target || evt.srcElement,
            par = target.parentNode.parentNode;
          var hasAttr = function(tag, attrName) {
            return tag.hasAttribute ? tag.hasAttribute(attrName) : !!tag[attrName];
          }
          if( !hasAttr( par, data_attr ) ){ return false; } else{
            var prop_name = target.getAttribute('bd');
            if ( prop_name && prop_name !== "" ) {
               pubSub.publish( message, prop_name, target.value );
            }   
          }
        
      };
  if ( document.addEventListener ) {
    document.addEventListener( "change", changeHandler, false );
  } else {
    document.attachEvent( "onchange", changeHandler );
  }
  pubSub.on( message, function( evt, prop_name, new_val ) {
      switch(prop_name){
          case "display":
              var elements = document.querySelectorAll("[" + data_attr + "]");
              for ( var i = 0, len = elements.length; i < len; i++ ) {
                  elements[ i ].style.display = new_val;
                  tag_name = elements[ i ].tagName.toLowerCase();
                  if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
                    elements[ i ].value = new_val;
                  } else {
                    elements[ i ].innerHTML = new_val;
                  }
              }
      ...