JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" class="txt">
  <p contenteditable="false"><span contenteditable="true" >Должен добавляться "!"</span></p>
  <p contenteditable="false"><span contenteditable="true" >А здесь не должен.</span></p>
</div>
<div id="pole"></div>

CSS

p {
	min-height: 24px;
}

JavaScript

$('.txt').focus();
$('.txt > p:first-child').on('input', function() {
	$('#pole').append('!');
});