People Picker Field not displaying on Display Form

I have an HTML control that is displaying several fields. The script works when the form is in edit mode, however when the script is in display mode the script does not display the two People picker fields. Do you know what the issue could be on the display form. Below is my code

fd.spRendered(function() {
    function hideOrShowDueDate() {
        if (fd.field('PerformanceType').value=="Probationary Progress Review") {
            // Show the Due Date field
            $('.Probation').show();
            $('.General').hide();
            $('.Leadership').hide();
        }  else if (fd.field('PerformanceType').value=="Performance Evaluation-Leadership") {
                   // Show the current table
            $('.Leadership').show();
            $('.Probation').hide();
            $('.General').show();               
            
        } else {
            // Hide the current table 
            $('.Leadership').hide();
            $('.Probation').hide();
            $('.General').show(); 
          }
    }

    // Calling hideOrShowDueDate when the user changes the Start Date
    fd.field('PerformanceType').$on('change',hideOrShowDueDate);

    // Calling hideOrShowDueDate on form loading
    hideOrShowDueDate();

});
fd.spRendered(function() {
//Info area 
$("#Employee").append(fd.field('Employee').value.DisplayText);
$("#Supervisor").append(fd.field('Supervisor').value.DisplayText);
$("#Department").append(fd.field('Department').value);
$("#HireDate").append(fd.field('Hire').value);
$("#Review").append(fd.field('ReviewPeriod').value);
$("#ReviewType").append(fd.field('PerformanceType').value);
$("#JobTitle").append(fd.field('JobTitle').value);
 });
fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false
};

Hello @jktodd007,

Could you please share the screenshot of the form and the code you are using in the HTML control, so we could reproduce the issue and troubleshoot it.

Thank you!

Here is the screen shot of the area on the form. As well as the html code. As I stated I use the same code for both edit and display mode and it works in edit mode.

<div id="header">
    <div class='container'></div>
</div>
<div class='container'>
    <div id="first">
    <div id="Employee">Employee:  </div>
    <div id="Supervisor">Supervisor:  </div>
    <div id="Department">Department: </div>
    <div id="JobTitle">Job Title:  </div>
    <div id="HireDate">Hire Date:  </div>
    <div id="Review">Review Period: </div>
    </div>
    <div id="second"><img class="logo" src="http://www.teampenske.com/images/ui/logo.png" alt="Team Penske Logo">
     <div id="ReviewType"> </div>
</div>

@jktodd007,

Please use displayName instead of DisplayText, o get the name of a user in the Display form.

$("#Employee").append(fd.field('Employee').value.displayName);
$("#Supervisor").append(fd.field('Supervisor').value.displayName);