<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>
.smiles-icons-war span{
  cursor: pointer;
  padding: 2px;
  user-select: none;
}

.smiles-icons-war span:hover{
  background: rgba(0,0,0,.1)
}
// Тут можно вызнать ajax
$(document).on('click', '.smiles-icons-war span', function () {
  // или тут
  const currentTextArea = $(this).closest('.item-chat').find('textarea')
  currentTextArea.val(currentTextArea.val() + $(this).text())
  // или тут
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.