Pisze programik, który generuje mi stronę z etykietami i jakimś tekstem do nich.
Chcę żeby po wygenerowaniu strony, była możliwość edycji tekstu przy etykietach.
Poproszę o podpowiedź czy dobrze do tego problemu podchodzę.

<!DOCUMENT html>
<html>
    <head>
        <script>
		
		function save(eid) {
			var input_value = document.getElementById(eid+'Data').value;
			document.getElementById(eid+'Edited').style.display = "none";
			
			document.getElementById(eid).style.display = "inline-flex";
			document.getElementById(eid).innerHTML = input_value;
			}
			
            function edit(eid){
			document.getElementById(eid).style.display = "none";
			document.getElementById(eid+'Edited').style.display = "inline-flex";
            document.getElementById(eid+'Edited').innerHTML = 
			"<form style='height: 0px;'><input id='"+eid+"Data' type='text' style='height: 19px; border: 0px;background-color: lightblue;'></form><div onclick=save('"+eid+"') style='height: 0px;border: 0px; background-color: white;'>☑</div>";
			
            }
				
        </script>
    </head>
    <body>
	<div style="display: inline-flex"><b>Imię:</b></div>
	<div id="labelAndGeneratedTekst" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
    <div id="labelAndGeneratedTekstEdited" style="display: none;"></div>
	
	<br>
	
	<div style="display: inline-flex"><b>Płeć:</b></div>
	<div id="labelAndGeneratedTekst2" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
    <div id="labelAndGeneratedTekst2Edited" style="display: none;"></div>
	
	<div style="display: inline-flex"><b>Zawód:</b></div>
	<div id="labelAndGenerated3Tekst" onclick="edit(this.id)" style="display: inline-flex">jakis tekst</div>
    <div id="labelAndGenerated3TekstEdited" style="display: none;"></div>
	
    </body>
</html>