JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textchat-input">
  <textarea></textarea>
  <button class="btn">Example button</button>
</div>

<button id="myButton">Press me</button>

CSS

#textchat-input {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 20px;
}

JavaScript

document.querySelector("button#myButton").addEventListener("click", postToChat);
document.querySelector("#textchat-input .btn").addEventListener("click", exampleClickHandler);

function postToChat(){
	console.log('Executing postToChat!');

  const message = "testing";
  const chatInputElement = document.querySelector('#textchat-input textarea');
  const chatButtonElement = document.querySelector('#textchat-input .btn');

  if (chatInputElement && chatButtonElement) {
    const activeText = chatInputElement.value;
    console.log(`activeText: ${activeText}`);
    
    chatInputElement.value = message;
    chatButtonElement.click();
    if (activeText) setTimeout(() => chatInputElement.value = activeText, 500);
  }
 
}

function exampleClickHandler() {
	const textAreaValue = document.querySelector('#textchat-input textarea').value;
	console.log(`Executing the exampleClickHandler. Textarea has value: ${textAreaValue}`);
}