JSFiddle - React, Tailwind, and code Playground

by Leo Cavalcante

HTML

<form>
    <input type="text" data-binding="name">
    <select data-binding="name">
        <option>foo</option>
        <option>bar</option>
        <option>baz</option>
    </select>
    <input type="checkbox" data-binding="name">
</form>
<div>
    <p>hello <span class="name"></span></p>
    <p>hello <span class="name"></span></p>
</div>

CSS

body {
    font: 12px Arial;
}

.name {
    font-weight: bold;
}

JavaScript

(function ( global, $ ) {
    'use strict';
    
    var context  = {},
        bindings = {
        set: function ( name, val ) {
            context[name] = val;
            $( '.' + name ).text( val );
        }
    };
    
    $( '[data-binding]' ).on( 'change keyup', function () {
        var input = $( this );
        bindings.set( input.attr( 'data-binding' ), input.val() );
    });
    
    global.bindings = global.bindings || bindings;
}( this, jQuery ));