JSFiddle - React, Tailwind, and code Playground

HTML

<h1>useless heading</h1>
<form id="zeForm">
foo <input id="foo" />
bar <input id="bar" />
baz <input id="baz" />
</form>

JavaScript

window.addEventListener
(
    'DOMContentLoaded',
    function()
    {
        var variablesMapping =
        {
            'foo':['NOT','SURE','WHAT','YOU','ARE','TRYING','TO','ACHIEVE'],
            'bar':':p'
        }
        var e = document.getElementById('zeForm');
        if( e )
        {
            e.addEventListener
            (
                'click',
                function(e)
                {
                    var n = e.srcElement;
                    while( n!=e.currentTarget && !n.form )
                        n=n.parentNode;
                    
                    if( n.form && n.id in variablesMapping )
                    {
                        alert( variablesMapping[n.id] );
                    }
                },
                false
            );
        }
    },
    false
);