JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div id='links'>
        <a class='buttonright'>Foo</a>
        <a class='buttonright'>Bar</a>
        <a class='buttonright'>Other</a>
        &nbsp;
    </div>
    <br/>
    <div id='req'>
        <label for='which'>Which anchor</label>
        <input type='text' id='which' name='which' /><br />
        <input type='button' id='find' value='Find link!' />
    </div>
</div>

CSS

.buttonright {
    display: block;
    border: 1px solid red;
    background-color: #BBB;
    width: 6em;
    float: left;
    margin: 0px 2px;
    text-align: center;
}

JavaScript

/**
     * The code to trigger an event (click or otherwise)
     * on a DOM node of your choice
     */
    var eventTrigger = function(node, event)
    {
        var e, eClass,
            doc = node.ownerDocument || (node.nodeType === (document.DOCUMENT_NODE || 9) ? node : document);
        if (node.dispatchEvent)
        {
            if (event === 'click' || event.indexOf('mouse') >= 0)
                eClass = 'MouseEvents';
            else
                eClass = 'HTMLEvents';
            e = doc.createEvent(eClass);
            e.initEvent(event, !(event === 'change'), true);
            e.synthetic = true;
            node.dispatchEvent(e, true);
            return true;
        }
        if (node.fireEvent)
        {
            e = doc.createEventObject();
            e.synthetic = true;
            node.fireEvent('on' + event, e);
            return true;
        }
        event = 'on' + event;
        return node[event]();
    };

/**************************************/
/*          Example usage:            */
/*  Bind listener to register clicks  */
/*  on links, alerts if the click was */
/*  registered, and tells you if the  */
/*    event was real or synthetic     */
/**************************************/


/**
 * Bind event handler for clicks inside the #links div
 * this will tell us when a link was clicked, and how
 */
document.querySelector('#links').addEventListener('click', function(e)
{
    var target = (e = e || window.event).target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a' && target.className.match(/\bbuttonright\b/))
    {//simple alert: ternary looks for synthetic property on the event object, set by the trigger function
        alert('Link with text "'+target.innerHTML+'" was clicked by a ' + (e.synthetic ? 'synthetic' : 'natural') + ' event');
    }
}, false);

/**
 * Clicking the button will use the input (if any) from the txt input
 * and find a link that matches. If found, an event will be triggered
 * If...