JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" class="specialDiv" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second"  class="specialDiv" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third"  class="specialDiv" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
    <i>(there could be more similar divs on a page)</i>

JavaScript

function doSomethingWithSelectedText() {
       //"remove quoteButton"
          var buttons = document.getElementsByClassName('quoteButton');
            if(buttons.length){
                var button = buttons[0];
                button.innerHTML = 'Reply';
                var classArr = button.className.split(' ');
                classArr.splice(classArr.indexOf('quoteButton'), 1);
                button.className = classArr.join(' ');
           }
        
        //check if new quoteButton should be labeled
        if (window.getSelection && window.getSelection().toString()) {
            if(window.getSelection().anchorNode.parentNode && window.getSelection().anchorNode.parentNode.className && window.getSelection().anchorNode.parentNode.className.split(' ').indexOf('specialDiv') > -1){
               var button = window.getSelection().anchorNode.parentNode.getElementsByTagName('button')[0];
               button.innerHTML = 'Quote';
               button.className += ' quoteButton';
            }
        }
    }    
    document.onmouseup = doSomethingWithSelectedText;
    document.onkeyup = doSomethingWithSelectedText;