JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editSection" id="display" >
    <div id="person_firstName" class="edit" width="200">
        Hello
    </div>
    <div id="person_lastName" class="edit">
        World
    </div>
</div>

<div class="editSectionEdit" id="input" >
    <form id="form1">
        <input name="person_firstName_in" type="text" class="edit" value="123" >
        <input name="person_lastName_in" type="text" class="edit" value="456" >
    </form>
</div><br/>

<div id="buttons">
    <a href="#" id="editLink">Edit</a>
    <a href="#" id="cancelLink">Cancel</a>
</div><br>

<pre id="result"></pre>

JavaScript

function editForm2(){
    $("#editLink").click(function() {
        if (this.text == 'Edit') {
            console.log('editing');
            $("#display div.edit").each(function(i) {
                var e = $("#input :input")[i];
                //console.log($(this).text());
                $(e).val($(this).text());
            });
            $("#display").hide();
            $("#input").show();
            $(this).text('Save');
        }
        else if (this.text =='Save') {
            // problem is here... When I serialize the form I got nothing ?!
            console.log('saving');
            console.log($("#form1 :input")); // old values

            var json_form = $('#form1').serialize();
            console.log(json_form); // old values?
            $(this).text('Edit');

            $("#display").show();
            $("#input").hide();
        }
    });

}

$(document).ready(function() {
    editForm2();
});