JSFiddle - React, Tailwind, and code Playground

HTML

<input id="example">
<button id="fillButton">Fill with X</button>
<div id="output"></div>

JavaScript

const inputField = document.querySelector("#example");
const outputDiv = document.querySelector("#output");
const button = document.querySelector("#fillButton")

inputField.addEventListener('change', e => {
	outputDiv.innerText = e.target.value;
});

button.addEventListener('click', _ => {
	inputField.value = "X";
	inputField.dispatchEvent(new Event('change'));
});