JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nome_mysql">João</div>
<input type="text" nome="nome_mysql" />

CSS

input[nome="nome_mysql"] {
    display: none;
}

JavaScript

var div = document.getElementById('nome_mysql');
var input = document.querySelector('input[nome="nome_mysql"]');
console.log(div, input)

function toggleElements(show, hide) {
    show.style.display = 'block';
    hide.style.display = 'none';
    show.focus();
}

div.addEventListener('click', function() {
    input.value = this.innerText;
    toggleElements(input, this);
});
input.addEventListener('blur', function() {
    div.innerText = this.value;
    toggleElements(div, this);
});