Losing text after a space setting the value in a new field

The issue is because you don't have any string delimiters around the value. Note the double quotes (") around the values of the attributes in this example:

$('#nameArea').html('<br/>First Name:<input type="text" id="fnField" value="' + $('#firstName').text() + '">Last Name:<input type="text" id="lnField" value="' + $('#lastName').text() + '"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>');

Alternatively you can avoid the string concatenation completely by using a Template Literal, but be aware this is unsupported in IE.

$('#nameArea').html(`<br/>First Name:<input type="text" id="fnField" value="${$('#firstName').text()}">Last Name:<input type="text" id="lnField" value="${$('#lastName').text()}"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>');

Finally, you can tidy this HTML further by removing the onclick attribute and using unobtrusive event handlers instead. You can use data attributes to contain the necessary metadata with the element.