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>

Każdy programista przybywający z innego miasta jest fachowcem.