JSFiddle - React, Tailwind, and code Playground

HTML

<form><input type="text" id="testInput"></form><br>
<a id="testLink" href="javascript:void(0)">Click me!</a><br>

<input type="button" id="testClick0" value="Click the text input"><br><input type="button" id="testClick1" value="Click the link">

<p id="testStatus"></p>

JavaScript

//Function to dispatch clicks, cross-browser
function dispatchClick(target) {
    if (document.createEvent) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, 0, null);
        target.dispatchEvent(clickEvent);
    }
    else {
        target.fireEvent("onclick");
    }
}

var statusElement = document.getElementById("testStatus");
var testInputElement = document.getElementById("testInput");
var testLinkElement = document.getElementById("testLink");
//Add event listeners for click
testInputElement.onclick = function() {
    statusElement.innerHTML += "Input was clicked!<br>";
};
testLinkElement.onclick = function() {
    statusElement.innerHTML += "Link was clicked!<br>";
};

//Add listeners to dispatch event on click
document.getElementById("testClick0").onclick = function() {
    dispatchClick(testInputElement);
};
document.getElementById("testClick1").onclick = function() {
    dispatchClick(testLinkElement);
};