JSFiddle - React, Tailwind, and code Playground

HTML

<div id="addedText">this div is editable, click on the Edit button</div>
<div style="padding:10px;"><textarea id="usertext"></textarea></div>
<button onclick="appendText(this)" class="edit">Edit</button>

CSS

#addedText {
  font:15px arial;
  margin:10px;
  border:1px solid #000;
}
#usertext {
  font:15px arial;
  border:1px solid #000;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display:none;
}

JavaScript

function appendText(button) {
  if (button.className == "edit") {
    button.className = "ok";
    button.innerHTML = "OK";
    document.getElementById("addedText").style.display = "none";
    document.getElementById("usertext").style.display = "inline";
    document.getElementById("usertext").value = document.getElementById("addedText").innerHTML.replace(/<br>/g, "\n").replace(/<br\/>/g, "\n");
  } else if (button.className == "ok") {
    button.className = "edit";
    button.innerHTML = "Edit"
    document.getElementById("addedText").style.display = "block";
    document.getElementById("usertext").style.display = "none";
    document.getElementById("addedText").innerHTML = document.getElementById("usertext").value.replace(/\n\r?/g, '<br/>');;
  }
}