JSFiddle - React, Tailwind, and code Playground

HTML

<div class="placeholder">
    <p>Editable Area</p>
    <div id="editarea" contenteditable="true">
        <textarea class="input-details" id="LargetextAns" rows="4" cols="20" data-val-required="Answer is required" data-val="true">test testsdfdsafdsfdsa</textarea>
    </div>
    <button id="toggleedittable">Edit On/Off</button>
</div>

CSS

.placeholder {
    padding: 10px;
    margin: 10px;
}
#editarea {
    padding: 5px;
    background-color: skyblue;
    width: 250px;
    height: 250px;
}

JavaScript

$('#toggleedittable').click(function () {
    if ($('#editarea').attr('contenteditable') == "true") {
        $('#editarea').attr('contenteditable', "false");
        $('#LargetextAns').attr('contenteditable', "false");
    } else {
        $('#editarea').attr('contenteditable', "true");
    }
});