What should I add here, if the content of the tags is changed, then it should reflect in the text box

Question

When you click the click me button, the tag text will change. Now I want to implement this, if the text of the range is changed, then a similar range, if it is inserted in the div tag, should also change. Link to violin link

document.querySelector('.selectable-icons').addEventListener('click', function(e) { document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true)); }); document.getElementById("clickMe").onclick = function () { document.getElementsByClassName('label')[0].innerHTML = 'new text'; }; document.querySelector('div').addEventListener('keydown', function(event) { // Check for a backspace if (event.which == 8) { s = window.getSelection(); r = s.getRangeAt(0) el = r.startContainer.parentElement // Check if the current element is the .label if (el.classList.contains('label')) { // Check if we are exactly at the end of the .label element if (r.startOffset == r.endOffset && r.endOffset == el.textContent.length) { // prevent the default delete behavior event.preventDefault(); if (el.classList.contains('highlight')) { // remove the element el.remove(); } else { el.classList.add('highlight'); } return; } } } event.target.querySelectorAll('span.label.highlight').forEach(function(el) { el.classList.remove('highlight');}) }); 

 [contenteditable] { border: 1px solid #000; margin: 0.4em 0; line-height: 1.4em; -webkit-appearance: textfield; appearance: textfield; } img { vertical-align: top; max-height: 1.4em; max-width: 1.4em; } .selectable-icons img { cursor: pointer; } span.label.highlight { background: #E1ECF4; border: 1px dotted #39739d; } span.label { background: #E1ECF4; border: 1px dotted #39739d; } 

 <p>Just click on an icon to add it.</p> <div class="custom-input"> <div class="selectable-icons"> <span class="label"> I 1 </span> <span class="label">I 2</span> <span class="label">I 3</span> </div> <div contenteditable="true"> You can type here. <span class="label"> I 1 </span> Add an icon. </div> </div><input id="clickMe" type="button" value="clickme" /> 

Note. Please do not give any suggestions for adding an event to the clickme button. I only need this when the range text changes. The button is for reference only. This should be a range text change event. If the tag is removed and it is still added to the text field, a tooltip should be indicated. It would be great if the solution used the reaction meteor js blaze js.