JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-chat item-chat1">
    <textarea name="text" class="chat-textarea chat-textarea-1" placeholder="Напишите свой вопрос.."></textarea>
    <div class="smiles-icons-war smiles-icons-war-1">
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
      <span>i</span>
      <span>f</span>
    </div>

  </div>
  <div class="d-flex">


    <div class="item-chat item-chat2">
      <textarea name="text" class="chat-textarea chat-textarea-2" placeholder="Напишите свой вопрос.."></textarea>
      <div class="smiles-icons-war smiles-icons-war-2">
        <span>h</span>
        <span>j</span>
        <span>k</span>
      </div>

    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

CSS

span {
  border: 1px solid black;
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}

JavaScript

function insertSmiles(chat) {
  const textarea = chat.querySelector('.chat-textarea');
  const spans = chat.querySelectorAll('.smiles-icons-war span');

  const emojiesSpan = Array.from(spans);

  emojiesSpan.forEach(item => {
    item.addEventListener('click', (event) => {
      textarea.value += event.target.innerHTML;
    });
  });
}

function init() {
  const chat1 = document.querySelector('.item-chat.item-chat1');
  const chat2 = document.querySelector('.item-chat.item-chat2');

  insertSmiles(chat1);
  insertSmiles(chat2);
}


//   FAKE AJAX

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(() => {
    console.log("AJAX READY! INIT LISTENERS!")
    init()
  })