How to exclude an option that have reached capacity from the form deployed using Google Apps Script-CodePudding

I created a web form using Google Apps Script that has options with capacity.

In the following example, there is a question to ask visitors to choose cheesecake or chocolate cake. Suppose that I have only two pieces of cheesecake and three pieces of chocolate cake, and if two visitors has already choose the cheesecake, I want to remove the option of cheesecake from the form and make that option invisible and thus unselectable, showing the option of chocolate cake only.

Then, how should I implement such a select question whose options have capacity using Google Apps Script?

Note but I want to create a custom web form, and that this time I do NOT use Google Forms for that purpose.

EDIT

The following link will show how this programme saves data on a spreadsheet:

Sample script

Please copy and paste the following scripts to the script editor. And, please reflect the latest script to the Web Apps.

Google Apps Script side: `Code.gs`

var spreadsheetId = "###"; // Please set your Spreadsheet ID.

function updateValue(e) {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheets()[0];
  var range = sheet.getRange("A2:B"   sheet.getLastRow());
  var values = range.getValues().map(([a, b]) => a == e ? [a, --b] : [a, b]);
  range.setValues(values);
  return values.map(([a, b]) => `<option value="${a}" ${b == 0 ? "disabled" : ""}>${a}</option>`).join("");
}

const doGet = () => {
  var sheet = SpreadsheetApp.openById(spreadsheetId).getSheets()[0];
  var [, ...values] = sheet.getDataRange().getValues();
  var v = values.map(([a, b]) => `<option value="${a}" ${b == 0 ? "disabled" : ""}>${a}</option>`).join("");
  var html = HtmlService.createTemplateFromFile("index.html");
  html.values = v || "";
  return html.evaluate();
}

HTML & Javascript side: `index.html`

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <form id="form">
    <div>
      <h1 id="Question">
        Choose either cheesecake or chocolate cake.
      </h1>

      <select id="sampleSelect" name="cake" >
        <?!= values ?>
      </select>
    </div>

    <div >
      <input type="submit" value="Submit" onclick="saveValue(this);return false;">
    </div>
  </form>
  <script>
    function saveValue(e) {
      const v = document.getElementById("form").cake.value;
      google.script.run.withSuccessHandler(updated => {
        document.getElementById("sampleSelect").innerHTML = updated;
      }).updateValue(v);
    }
  </script>
</body>

</html>

Testing

Please access the deployed Web Apps reflected in the modified script. By this, you can see the dropdown list.

In this sample, cheesecake has 2. When you select a cheesecake and click the "Submit" button, the number of cheesecakes on the Spreadsheet becomes from 2 to 1. When you select cheesecake and click the button again, you can confirm that the option of cheesecake cannot be selected.

I thought that this might be your expected result.

Note

When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.
You can see the detail of this in the report of "

and each time a person orders a cake, the quantity is reduced by 1.

When the quantity of cake reaches 0, the script will remove the cake from the drop down list: