JSFiddle - React, Tailwind, and code Playground
HTML
<div id='1' class='editable' contenteditable>text1</div>
<div id='2' class='editable' contenteditable>text2</div>
<div id='3' class='editable' contenteditable>text3</div>
<div id='4' class='editable' contenteditable>text4</div>
<div id='1' class='editable' contenteditable>text5</div>
<div id="feedback"></div>
CSS
div.editable {
background-color:red;
margin:10px;
width:200px;
height:30px;
}
#feedback {
background-color:lightblue;
margin:10px;
width:300px;
height:60px;
}
JavaScript
var editable_divs= document.getElementsByClassName("editable");
for (var i=0; i<editable_divs.length; i++) {
editable_divs[i].addEventListener("input",
function () {
var feedback= document.getElementById("feedback");
feedback.innerHTML="Changed text! "+this.innerHTML;
}
,false);
}