JSFiddle - React, Tailwind, and code Playground

HTML

<div id='1' class='editable' contenteditable>Paragraph 1 that is content editable...</div>
<div id='2' class='editable' contenteditable>A similar paragraph</div>
<div id='3' class='editable' contenteditable>Yet another paragraph...</div>
<div id="feedback">No changes yet...</div>

CSS

div.editable {
    border:2px solid #EAEAEA;
    border-radius:5px;
    padding:10px;
    width:90%;
    margin:10px;
}
.yellow {
    background-color:yellow;
}
#feedback {
     background-color:lightblue;
    margin:10px;
    width:90%;
}
.change {
     background-color:yellow;    
}

JavaScript

// COLLECT THE EDITABLE DIVS
var editable_divs= document.getElementsByClassName("editable");

// ALL THE CHANGES ARE STORED HERE {id:content}
var div_changes={};

// This function only displays visual feedback, no other purpose
function updateFeedback() {
    var html="";
    for (var i in div_changes) {
        html+="<p>Changes in div with id="+i+"</p>";
        html+="<div class=\"change\">"+div_changes[i]+"</div>";
    }
    document.getElementById("feedback").innerHTML=html;
}

// THIS SNIPPET PUTS ALL THE CHANGES IN THE STORING OBJECT
for (var i=0; i<editable_divs.length; i++) {
    editable_divs[i].addEventListener("input",
        function () { 
            div_changes[this.id]=this.innerHTML;
            
            // check the stored results
            console.log(div_changes);
            /// the following lines are just for visual feedback
            this.style.backgroundColor="yellow";
            updateFeedback();
        }
        ,false);
}