collinenlucy.nl/client/rsvp.js

let partySize = 0;

function createNewMember(id) {
  const memberDiv = document.createElement("div");
  memberDiv.classList.add("member");

  const nameDiv = document.createElement("div");

  const nameLabel = document.createElement("label");
  nameLabel.htmlFor = `name-${id}`;
  nameLabel.innerHTML = "Name:";

  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.id = `name-${id}`;
  nameInput.name = `name-${id}`;
  nameInput.required = true;
  nameInput.style = "width:0;flex:1;";

  nameDiv.appendChild(nameLabel);
  nameDiv.appendChild(nameInput);

  const childDiv = document.createElement("div");

  const childLabel = document.createElement("label");
  childLabel.htmlFor = `child-${id}`;
  childLabel.innerHTML = "Child:";

  const childInput = document.createElement("input");
  childInput.type = "checkbox";
  childInput.id = `child-${id}`;
  childInput.name = `child-${id}`;
  childInput.style = "font-size: 1rem";

  const childInputDiv = document.createElement("div");
  childInputDiv.classList.add("fill-right");

  childInputDiv.appendChild(childInput);

  childDiv.appendChild(childLabel);
  childDiv.appendChild(childInputDiv);

  const dietDiv = document.createElement("div");
  dietDiv.style = "flex-direction: column;";

  const dietLabel = document.createElement("label");
  dietLabel.htmlFor = `diet-${id}`;
  dietLabel.innerHTML = "Dietary preferences:";
  dietLabel.style = "flex:1;";

  const dietInput = document.createElement("textarea");
  dietInput.id = `diet-${id}`;
  dietInput.name = `dietaryPreferences-${id}`;
  dietInput.style = "flex:1;"

  dietDiv.appendChild(dietLabel);
  dietDiv.appendChild(dietInput);

  const separatorDiv = document.createElement("div");
  separatorDiv.classList.add("separator");

  memberDiv.appendChild(separatorDiv);
  memberDiv.appendChild(nameDiv);
  memberDiv.appendChild(childDiv)
  memberDiv.appendChild(dietDiv);

  document.querySelector("div.members").appendChild(memberDiv);
}

function updatePartySize(newPartySize) {
  if (newPartySize > partySize) {
    for (let i = partySize; i < newPartySize; i++) {
      createNewMember(partySize);
    }
  } else if (newPartySize < partySize) {
    for (let i = partySize; i > newPartySize; i--) {
      document.querySelector("div.members").lastChild.remove();
    }
  }
  partySize = newPartySize;
}

window.onload = function () {
  const partySizeDropdown = document.querySelector("select#party-size");
  partySizeDropdown.addEventListener("change", () => {
    updatePartySize(Number.parseInt(partySizeDropdown.value));
  });
  updatePartySize(1);
};