How to display conditional inputs of radio buttons without removing generate buttons at the bottom

I’m building a program for work that assists in generating a medical SITREP report for our own purposes, and I’m having a bit of trouble with the HTML/jscript side of things. With help from ChatGPT, I was able to get the ball rolling a bit, but I’ve run into an issue…

The base of the HTML doc is a form with a series of labels and inputs for information that’s compiled in the function generateReport(). That section I plan to work on later; however, at the moment it’s part of the GUI that I’m trying to debug.

At the base of the code before the Generate Report and Copy SITREP buttons are a series of three radio buttons. I had it working once before, but the radio buttons were supposed to display different labels and inputs based on which radio button was selected. However, now for some reason, no matter which radio button is clicked, it doesn’t show any conditional inputs, and in fact it removes the Generate Report and Copy SITREP buttons entirely!

Like I said before, I attempted to use ChatGPT to assist me in debugging and fixing this issue, but it may have just made it worse in the process. Regardless, here’s the code I currently have. If you all are able to assist me with this issue, I’ll be extremely grateful! 🙂

function checkSymptoms() {
  var symptoms = document.getElementById("symptoms").value;
  var symptomsDetails = document.getElementById("symptomsDetails");
  if (symptoms === "smallCut" || symptoms === "jammed" || symptoms === "sprain" || symptoms === "eyeDamage" || symptoms === "other") {
    symptomsDetails.style.display = "inline-block";
  } else {
    symptomsDetails.style.display = "none";
  }
}

function showFields() {
  // Hide all conditional inputs initially
  document.getElementById('stayingWork').classList.add('hidden');
  document.getElementById('goingHome').classList.add('hidden');
  document.getElementById('emsResponse').classList.add('hidden');

  // Get the selected option
  const selectedOption = document.querySelector('input[name="response"]:checked')?.value;

  // Show fields based on selected option
  if (selectedOption === 'stayingWork') {
    document.getElementById('stayingWork').classList.remove('hidden');
  } else if (selectedOption === 'goingHome') {
    document.getElementById('goingHome').classList.remove('hidden');
  } else if (selectedOption === 'emsResponse') {
    document.getElementById('emsResponse').classList.remove('hidden');
  } else {
    document.getElementById('sitrepSection').classList.add('hidden');
  }
}

function generateReport() {
  var time1 = document.getElementById("time1").value;
  var timeZone = document.getElementById("timeZone").value;
  var employeeType1 = document.getElementById("employeeType1").value;
  var employee1 = document.getElementById("employee1").value;
  var employeeId1 = document.getElementById("employeeId1").value;
  var employeeType2 = document.getElementById("employeeType2").value;
  var employee2 = document.getElementById("employee2").value;
  var employeeId2 = document.getElementById("employeeId2").value;
  var symptoms = document.getElementById("symptoms").value;
  var symptomsDetails = document.getElementById("symptomsDetails").value;

  // Object mapping symptoms to sentence structures
  var symptomSentences = {
    "dizzy": "who was feeling dizzy while on shift",
    "nausea": "who began feeling nauseous while on shift",
    "vomit": "who had begun vommiting while on shift",
    "sweats": "who had started sweating heavily on shift",
    "smallCut": "who had sustained a small cut on their {details}",
    "eyeDamage": "who had sustained eye damage due to {details}",
    "jammed": "who had jammed their {details}",
    "breathing": "who was having trouble breathing",
    "tremors": "who was experiencing shakes and tremors in their {details}",
    "headInjury": "who had sustained a head injury while on shift",
    "slip": "who had experienced a slip and fall event",
    "sprain": "who had sprained their {details} while on shift",
    "chestPain": "who was experiencing chest pains",
    "severeHeadache": "who begun experiencing a severe headache",
    "labor": "who had begun experience symptoms of labor",
    "pregnancy complication": "who had possibly begun experiencing a pregnancy complication",
    "seizure": "who had experienced a seizure while on shift",
    "heartAttack": "who had begun showing symptoms of a heart attack",
    "feinting": "who had feinted while on shift",
    "panicAttack": "who began having a panic attack while on shift",
    "other": "who was experiencing {details}"
  };

  // If the symptom requires details (e.g., sprain location), we add it
  var sentence = symptomSentences[symptoms];
  if (symptoms === "smallCut" || symptoms === "eyeDamage" || symptoms === "jammed" || symptoms === "tremors" || symptoms === "sprain" || symptoms === "other") {
    if (symptomsDetails) {
      sentence = sentence.replace("{details}", symptomDetails);
    } else {
      sentence = sentence.replace("{details}", "unspecified area");
    }
  }
  var mod = document.getElementById("mod").value;
  var location = document.getElementById("location").value;
  var time2 = document.getElementById("time2").value;
  var ERTMember = document.getElementById("ERTMember").value;
  var ERTResponse = document.getElementById("ERTResponse").value;

  var report = "At " + time1 + " " + timeZone + ", the RSOC (Regional Security Operations Center) received a call from " +
    employeeType1 + " employee " + employee1 + " (" + employeeId1 + ") regarding " + employeeType2 + " employee " + employee2 + " (" + employeeId2 + ") " +
    sentence + " in Mod " + mod + " nearby column " + location + ". The ERT Team was contacted through the Push To Talk (PTT) phone at " + time2 + " " + timeZone +
    ", and ERT Team member " + ERTMember + " responded stating that they were en route. ERT arrived at the patient at " + ERTResponse + " " + timeZone +
    " and began assessing the situation. ";

  document.getElementById("sitrepReport").textContent = report;
  alert("SITREP Generated!");
}

function copyToClipboard() {
  var reportText = document.getElementById("sitrepReport").textContent;
  navigator.clipboard.writeText(reportText).then(function() {
    alert('SITREP Report copied to clipboard');
  }, function(err) {
    alert('Error in copying text: ', err);
  });
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
}

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 900px;
  margin: auto;
}

.form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.form-group label {
  flex: 0 0 auto;
  margin-right: 10px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group select {
  flex: 1;
  margin: 0;
  margin-right: 10px;
  box-sizing: border-box;
}

.form-group input[type="button"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.form-group input[type="button"]:hover {
  background-color: #45a049;
}

.radio-group {
  margin-bottom: 10px;
}

.radio-group label {
  margin-right: 20px;
}

.conditional-inputs {
  display: none;
  margin-top: 10px;
}

.conditional-inputs input[type="text"] {
  width: 100%;
  max-width: 500px;
  margin: 5px 0;
  box-sizing: border-box;
}

pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: auto;
}

#copyButton {
  background-color: #008CBA;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

#copyButton:hover {
  background-color: #007bb5;
}

.hidden {
  display: none;
}

<h1>Medical SITREP Report Generator</h1>
<form id="incidentForm">
  <div class="form-group">
    <label for="time1">Initial Call Time:</label>
    <input type="time" id="time1" name="time1" required>
    <label for="timeZone">Time Zone:</label>
    <select id="timeZone" name="timeZone" required>
      <option value="">Select Time Zone</option>
      <option value="CST">CST</option>
      <option value="EST">EST</option>
      <option value="PST">PST</option>
    </select>
  </div>
  <div class="form-group">
    <label for="employeeType1">Company:</label>
    <select id="employeeType1" name="employeeType1" required>
      <option value="">--Select Company--</option>
      <option value="Flex">Flex</option>
      <option value="Aramark">Aramark</option>
      <option value="SolarEdge">SolarEdge</option>
      <option value="Aerotek">Aerotek</option>
      <option value="Hallmark">Hallmark</option>
      <option value="VOLT">VOLT</option>
      <option value="Staffmark">Staffmark</option>
      <option value="ONIN">ONIN</option>
      <option value="Allied Universal">Allied Universal</option>
      <option value="Facilities">Facilities</option>
      <option value="Other">Other</option>
    </select><br>
    <label for="employee1">Reporting Employee:</label>
    <input type="text" id="employee1" name="employee1" required>
    <label for="employeeId1">ID Number:</label>
    <input type="text" id="employeeId1" name="employeeId1" required>
  </div>
  <div class="form-group">
    <label for="employeeType2">Company:</label>
    <select id="employeeType2" name="employeeType2" required>
      <option value="">--Select Company--</option>
      <option value="Flex">Flex</option>
      <option value="Aramark">Aramark</option>
      <option value="SolarEdge">SolarEdge</option>
      <option value="Aerotek">Aerotek</option>
      <option value="Hallmark">Hallmark</option>
      <option value="VOLT">VOLT</option>
      <option value="Staffmark">Staffmark</option>
      <option value="ONIN">ONIN</option>
      <option value="Allied Universal">Allied Universal</option>
      <option value="Facilities">Facilities</option>
      <option value="Other">Other</option>
    </select>
    <label for="employee2">Patient Name:</label>
    <input type="text" id="employee2" name="employee2" required>
    <label for="employeeId2">Patient ID Number:</label>
    <input type="text" id="employeeId2" name="employeeId2" required>
  </div>
  <div class="form-group">
    <label for="symptoms">Symptoms:</label>
    <select id="symptoms" name="symptoms" onchange="checkSymptoms()" required>
      <option value="">--Select Symptoms--</option>
      <option value="dizzy">Dizziness</option>
      <option value="nausea">Nausea</option>
      <option value="vommit">Vommiting</option>
      <option value="sweats">Sweating</option>
      <option value="smallCut">Small Cut</option>
      <option value="eyeDamage">Something in their eye</option>
      <option value="jammed">Jammed Body Part</option>
      <option value="breathing">Difficulty Breathing</option>
      <option value="tremors">Tremors and/or Shakes</option>
      <option value="headInjury">Head injury</option>
      <option value="slip">Slip and Fall</option>
      <option value="sprain">Sprain</option>
      <option value="chestPain">Chest Pain</option>
      <option value="severeHeadache">Severe Headache</option>
      <option value="labor">Labor</option>
      <option value="pregnancy complication">Pregnancy Complication</option>
      <option value="seizure">Seizure</option>
      <option value="heartAttack">Heart Attack Symptoms</option>
      <option value="feinting">Feinting</option>
      <option value="panicAttack">Anxiety/Panic Attack</option>
      <option value="other">Other</option>
    </select>
    <input type="text" id="symptomsDetails" name="symptomsDetails" placeholder="Provide more details" style="display:none; margin-left: 10px;">
  </div>
  <div class="form-group">
    <label for="mod">Mod:</label>
    <select id="mod" name="mod" required>
      <option value="">--Select Mod--</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
      <option value="E">E</option>
      <option value="F">F</option>
      <option value="G">G</option>
      <option value="H">H</option>
      <option value="I">I</option>
      <option value="J">J</option>
      <option value="K">K</option>
      <option value="L">L</option>
      <option value="M">M</option>
      <option value="N">N</option>
      <option value="O">O</option>
      <option value="P">P</option>
      <option value="Q">Q</option>
      <option value="R">R</option>
      <option value="S">S</option>
      <option value="T">T</option>
      <option value="U">U</option>
      <option value="V">V</option>
      <option value="W">W</option>
    </select>
    <label for="location">Exact Location:</label>
    <input type="text" id="location" name="location" required>
  </div>
  <div class="form-group">
    <label for="time2">Time ERT Team Contacted:</label>
    <input type="time" id="time2" name="time2" required style="width: 150px;">
  </div>
  <div class="form-group">
    <label for="ERTMember">Responding ERT Member:</label>
    <input type="text" id="ERTMember" name="ERTMember" required>
  </div>
  <div class="form-group">
    <label for="ERTResponse">Time ERT Arrived:</label>
    <input type="time" id="ERTResponse" name="ERTResponse" required>
  </div>
  <div class="radio-group">
    <label><input type="radio" name="response" value="stayingWork" onclick="showFields()"> Staying at Work</label>
    <label><input type="radio" name="response" value="goingHome" onclick="showFields()"> Going Home</label>
    <label><input type="radio" name="response" value="emsResponse" onclick="showFields()"> EMS Responded</label>
  </div>
  <div id="stayingWork" class="hidden">
    <label for="allClearTime">Time of All Clear:</label>
    <input type="time" id="allClearTime" name="allClearTime" </div>
    <div id="goingHome" class="hidden">
      <label for="leftSite">Left site at:</label>
      <input type="time" id="leftSite" name="leftSite"><br>
      <label for="homeAllClearTime">Time of All Clear:</label>
      <input type="time" id="homeAllClearTime" name="homeAllClearTime">
    </div>
    <div id="emsResponse" class="hidden">
      <label for="unitNumber">Unit #:</label>
      <input type="text" id="unitNumber" name="unitNumber"><br>
      <label for="arrivedSite">Arrived at Site:</label>
      <input type="time" id="arrivedSite" name="arrivedSite"><br>
      <label for="arrivedPatient">Arrived at Patient:</label>
      <input type="time" id="arrivedPatient" name="arrivedPatient"><br>
      <label for="hospitalName">Hospital Name:</label>
      <input type="text" id="hospitalName" name="hospitalName"><br>
      <label for="leftSiteEMS">Left site at:</label>
      <input type="time" id="leftSiteEMS" name="leftSiteEMS"><br>
      <label for="emsAllClearTime">Time of All Clear:</label>
      <input type="time" id="emsAllClearTime" name="emsAllClearTime">
    </div>
    <div class="form-group">
      <h2>SITREP Report:</h2>
      <pre id="sitrepReport:"></pre>
      <button type="button" onclick="generateReport()">Generate SITREP</button>
      <button type="button" onclick="copyToClipboard()">Copy SITREP</button>
    </div>
</form>