Data retrieval to dropdown based on other dropdown trigger?

I have a google sheet with a worksheet called "Statuses". I also have a web form in apps script. I want a user to be able to select the parcel drop down and then have this retrieve the MAX value in google sheet associated to that dropdown value:

I select my parcel dropdown, which exists in the worksheet:

but the status dropdown does not populate with [Negotiating], which is the max status value in this google worksheet:

here is the code I tried:

    function getMaxStatusForParcel(parcel) {  var url = 'https://docs.google.com/spreadsheets...';  var ss = SpreadsheetApp.openByUrl(url);      var statusSheet = ss.getSheetByName("Statuses");  var lastRow = statusSheet.getLastRow();  var parcelValues = statusSheet.getRange('A4:A'+ lastRow).getValues().flat();  var statusValues = statusSheet.getRange('B4:B'+ lastRow).getValues().flat();  for (var i = 0; i < parcelValues.length; i++) {    if (parcelValues[i] === parcel) {      return statusValues[i];    }  }  return ""; // Return empty string if no matching parcel found}

and the onchange event trigger in html:

<label>Parcel</label><br><select name="parcel" id="parcel" onchange="getMaxStatusForParcel(this.value)"></select><br><br>

rest of code:

    function doGet(e) {      var htmlOutput = HtmlService.createTemplateFromFile('DependentSelect');      var subs = getDistinctSubstations();      htmlOutput.message = '';      htmlOutput.subs = subs;      return htmlOutput.evaluate();    }    function doPost(e) {      var parcel = e.parameter.parcel.toString();      var substation = e.parameter.substation.toString();      var comment = e.parameter.comment.toString();      var status = e.parameter.status.toString();      var date = new Date();      addRecord(comment, parcel, date);      addToStatuses(parcel, status, date);      var htmlOutput = HtmlService.createTemplateFromFile('DependentSelect');      var subs = getDistinctSubstations();      htmlOutput.message = 'Record Added';      htmlOutput.subs = subs;      return htmlOutput.evaluate();     }    function getStatusOptions(parcel) {      var maxStatus = getMaxStatusForParcel(parcel);      var options = ["", "Outreach", "Negotiating", "Signed"];      var dropdownHTML = options.map(option => {        if (option === maxStatus) {          return `<option value="${option}" selected>${option}</option>`;        } else {          return `<option value="${option}">${option}</option>`;        }      }).join("");      return dropdownHTML;    }    function getDistinctSubstations() {      var ss = SpreadsheetApp.getActiveSpreadsheet();      var rdSheet = ss.getSheetByName("Raw Data");       var subs = rdSheet.getRange('O4:O'+ rdSheet.getLastRow()).getValues().flat().filter((sub, index, self) => self.indexOf(sub) === index && sub !== "");      return subs;    }    function getParcels(substation) {      var ss = SpreadsheetApp.getActiveSpreadsheet();      var rdSheet = ss.getSheetByName("Raw Data");       var lastRow = rdSheet.getLastRow();      var substationValues = rdSheet.getRange('O4:O'+ lastRow).getValues().flat();      var parcelValues = rdSheet.getRange('A4:A'+ lastRow).getValues().flat();      var filteredParcels = [];      for (var i = 0; i < substationValues.length; i++) {        if (substationValues[i] === substation && parcelValues[i]) {          filteredParcels.push(parcelValues[i]);        }      }      return filteredParcels.filter(parcel => parcel !== "");    }    function getMaxStatusForParcel(parcel) {      var url = 'https://docs.google.com/spreadsheets...';      var ss = SpreadsheetApp.openByUrl(url);      var statusSheet = ss.getSheetByName("Statuses");      var lastRow = statusSheet.getLastRow();      var parcelValues = statusSheet.getRange('A4:A'+ lastRow).getValues().flat();      var statusValues = statusSheet.getRange('B4:B'+ lastRow).getValues().flat();      for (var i = 0; i < parcelValues.length; i++) {        if (parcelValues[i] === parcel) {          return statusValues[i];        }      }      return ""; // Return empty string if no matching parcel found    }    function addRecord(comment, parcel, date) {      var url = 'https://docs.google.com/spreadsheets....';      var ss = SpreadsheetApp.openByUrl(url);      var dataSheet = ss.getSheetByName("Comments");      var formattedDate = Utilities.formatDate(new Date(date), Session.getScriptTimeZone(), "MM/dd/yy");      dataSheet.appendRow([parcel, comment, formattedDate]);    }    function addToStatuses(parcel, status, date) {      var url = 'https://docs.google.com/spreadsheets....';      var ss = SpreadsheetApp.openByUrl(url);      var statusSheet = ss.getSheetByName("Statuses");      var formattedDate = Utilities.formatDate(new Date(date), Session.getScriptTimeZone(), "MM/dd/yy");      statusSheet.appendRow([parcel, status, formattedDate]);    }    function getUrl() {      var url = ScriptApp.getService().getUrl();      return url;    }

and then html code:

<!DOCTYPE html><html><head><base target="_top"><style>        body {          font-size: 15px;          background-color: #f0f8ff; /* Light blue background color */        }        .container {          width: 50%;          margin: 0 auto; /* Center the container horizontally */          text-align: center; /* Center the content inside the container */          padding-top: 20px; /* Add space at the top */        }        h1 {          margin-top: 20px; /* Add space between header image and header text */          font-size: 20px;        }        select {          width: 100%; /* Set the width of dropdown menus to fill the container */          font-size: 15px; /* Set font size for dropdown values */        }        textarea {          height: 80px;          font-size: 15px; /* Set font size for textarea */        }        input[type="submit"] {          font-size: 15px; /* Set font size for submit button */        }        .submit-message {          color: red;          font-size: 15px;        }</style><script>        function getParcels(substation) {          google.script.run.withSuccessHandler(function(parcels) {            var parcelDropdown = document.getElementById("parcel");            parcelDropdown.innerHTML = "";            var option = document.createElement("option");            option.value = "";            option.text = "";            parcelDropdown.appendChild(option);            parcels.forEach(function(parcel) {              var option = document.createElement("option");              option.value = parcel;              option.text = parcel;              parcelDropdown.appendChild(option);            });          }).getParcels(substation);        };        function getMaxStatusForParcel(parcel) {          var statusDropdown = document.getElementById("status");          if (!parcel) {            statusDropdown.innerHTML = '<option value=""></option>';            return;          }          google.script.run.withSuccessHandler(function(maxStatus) {            var options = ["", "Outreach", "Negotiating", "Signed"];            var dropdownHTML = options.map(option => {              if (option === maxStatus) {                return `<option value="${option}" selected>${option}</option>`;              } else {                return `<option value="${option}">${option}</option>`;              }            }).join("");            statusDropdown.innerHTML = dropdownHTML;          }).getStatusOptions(parcel);        }        function validateForm() {          var parcel = document.getElementById("parcel").value;          var substation = document.getElementById("substation").value;          var comment = document.getElementById("comment").value;          var status = document.getElementById("status").value; // Get status value          if (!parcel || !substation || !comment || !status) {            document.getElementById("submit-message").innerText = "All fields are required.";            return false; // Prevent form submission          }          return true; // Allow form submission        }</script>  </head><body><div class="container"><img src="https://i.imgur.com/16QsZja.png" alt="Header Image" style="width: 100%; max-width: 200px;"><h1>Comment Submission Form</h1><? var url = getUrl(); ?><form method="post" action="<?= url ?>" onsubmit="return validateForm()"><label>Substation</label><br><select name="substation" id="substation" onchange="getParcels(this.value)"><option value=""></option><? for (var i = 0; i < subs.length; i++) { ?><option value="<?= subs[i] ?>"><?= subs[i] ?></option><? } ?></select><br><br><label>Parcel</label><br><select name="parcel" id="parcel" onchange="getMaxStatusForParcel(this.value)"></select><br><br><label>Status</label><br><select name="status" id="status"></select><br><br><label>Comment</label><br><textarea name="comment" id="comment"></textarea><br><br><input type="submit" name="submitButton" value="Submit" /> <span id="submit-message" class="submit-message"></span>      </form></div></body></html>