JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<form id="msgbox" action="#" method="get">
<label for="msg">your message</label>
<input id="msg" value="" />
<button>SEND</button>
</form>
<form id="msgbox1" action="#" method="get">
<label for="msg1">your message</label>
<input id="msg1" value="" />
<button>SEND</button>
</form>
<script>
var msgbox = document.getElementById("msgbox");
msgbox.addEventListener("submit", SendMessage, true);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = document.getElementById("msg").value.trim();

	if (msg && window.CustomEvent) {
		var event = new CustomEvent("newMessage", {
			detail: {
				message: msg,
				time: new Date(),
			},
			bubbles: true,
			cancelable: true
		});
	
		e.currentTarget.dispatchEvent(event);
	}

}
// listen for newMessage event
document.addEventListener("newMessage", newMessageHandler, false);

// newMessage event handler
function newMessageHandler(e) {
 console.log(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.detail.time.toLocaleString()+": "+e.detail.message
	);
}
var msgbox = document.getElementById("msgbox1");
msgbox.addEventListener("submit", SendMessage, true);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = document.getElementById("msg").value.trim();

	if (msg && window.CustomEvent) {
		var event = new CustomEvent("newMessage", {
			detail: {
				message: msg,
				time: new Date(),
			},
			bubbles: true,
			cancelable: true
		});
	
		e.currentTarget.dispatchEvent(event);
	}

}
// listen for newMessage event
document.addEventListener("newMessage", newMessageHandler, false);

// newMessage event handler
function newMessageHandler(e) {
 console.log(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.detail.time.toLocaleString()+": "+e.detail.message
	);
}
</script>