<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())
// или тут
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.