JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv">
    <br>Click to edit
    <br>this text.
    <br>And this line has space &nbsp; on the begining.
    <br>How to convert space to &nbsp; ?
    <br>
    <br>
</div>
<textarea id="myText"></textarea>
<button id="myBtn">div to textarea</button>

CSS

div, textarea {
    width: 300px;
    height: 150px;
    border: 1px solid green;
    overflow: auto;
}

JavaScript

var x = "div to textarea";
    var y = "textarea to div";
    
    var div = document.getElementById('myDiv');
    var txt = document.getElementById('myText');
    var btn = document.getElementById('myBtn');
    $(btn).click(function () {
        if (this.innerHTML == x) {
            txt.value = div.innerHTML.split('<br>').join('\n').split('&nbsp;').join(' ');
            debugger;
            console.log(txt.value);
            div.innerHTML = "";
            btn.innerHTML = y;
        } else {
            div.innerHTML = txt.value.split('\n').join('<br>').split(' ').join('&nbsp;');
            txt.value = "";
            btn.innerHTML = x;
        }
    });