Custom popup element shows field in Alphabetical Order not order in code

[Sian_Doherty_GHD]

I have customised the popup to use a popupElement to only display fields with content. With the help of ChatGPT this is my code: 

var popupContent = "<table style='border-collapse: collapse;'>";
var cellPadding = "8px"; // Adjust padding as needed

// Field map to hold the field names and their corresponding values
var fieldMap = {
    "Facility ID": $feature.facility_ID,
    "Name": $feature.name,
    "Description": $feature.description,
    "Wharf": $feature.wharf,
    "Berth": $feature.berth,
    "Condition Assessment Rating": $feature.ca_rating,
    "Condition Assessment Date": Text($feature.ca_date, "dddd DD MMMM Y"),
    "Condition Assessment Comments": $feature.ca_comments,
    "Collection Method": $feature.collection_method,
    "Source": $feature.source,
    "Source Date": Text($feature.source_date, "dddd DD MMMM Y")
};

// Add fields to popup content
var i = 0;
for (var fieldName in fieldMap) {
    var fieldValue = fieldMap[fieldName];
    if (fieldValue != null && fieldValue != "") {
        var rowColor;
        if (i % 2 == 0) {
            rowColor = "#FBFBFB";
        } else {
            rowColor = "#EDEDED";
        }
        popupContent += "<tr style='background-color:" + rowColor + "'><td style='padding:" + cellPadding + "'><b>" + fieldName + ":</b></td><td style='padding:" + cellPadding + "'>" + fieldValue + "</td></tr>";
        i++;
    }
}

popupContent += "</table>";

// Return statement adjusted for popupElement
return { 
type: "text", 
text: popupContent 
};

 However the result i'm getting is showing the fields in alphabetical order, not the order listed in my code. I am unsure as to why - can anyone help?

I had alternate code previously that was working the way I wanted, but the request is that it be formatted in a table, like the default ESRI popup but customised to only show fields with content, hence the code.

Feature Layer is hosted in ArcGIS online but cannot be shared publicly.