JSFiddle - React, Tailwind, and code Playground

HTML

<div><button id="spell">Toggle Spellcheck</button><span id="spellStatus"></span></div>
<div><button id="edit">Toggle Editable</button><span id="editStatus"></span></div>
<div id="textContent" style="margin:20px; padding:20px; border:1px dotted #888;">
Here is some texxt with spellung erreurs.
</div>
<div>
    <p>In Chrome (if not other browsers):</p>
    <ol>
        <li>Enable editing</li>
        <li>Click inside the text content above</li>
        <li>Notice the red underlines</li>
        <li>Disable editing</li>
        <li>Notice that the red underlines persist even when the content is not editable</li>
    </ol>
</div>

JavaScript

function updateStatus() {
    console.log("updating");
    $("#spellStatus").text( String( $("#textContent").attr("spellcheck") ) );
    $("#editStatus").text(  String( $("#textContent").attr("contentEditable") ) );    
}

$(function() {
    updateStatus();
    
    $("#spell").click(function() {
        console.log("spell");
        $("#textContent").attr( "spellcheck", function(ix,old) {
            old = old === "false" ? false : true; // defaults to true
            console.log("setting " + (!old));
            return !old;
        });
    });
    $("#edit").click(function() {
        console.log("edit");
        $("#textContent").attr( "contentEditable", function(ix,old) {
            old = old === "true" ? true : false; // defaults false
            console.log("setting " + (!old));
            
            this.style.borderColor = (!old) ? "red" : "#888";
            return !old;
        });
    });
    
    $("#spell, #edit").click(updateStatus);
    
});