Fire Station Bidding

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Station Bidding</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @media only screen and (min-width: 600px) {
      body {
        margin-right: 200px;
        margin-left: 200px;
        margin-top: 20px;
      }
    }

    .boxes {
      padding: 20px;
      margin: 10px;
      border-style: solid;
      border-color: black;
      min-height: 150px;

    }

    .button {
      background-color: #04AA6D;
      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      width: 100%;
    }

    .button-blue {
      background-color: #008CBA;
    }

    .button-red {
      background-color: #f44336;
    }

    .button-gray {
      background-color: #e7e7e7;
      color: black;
    }

    .button-black {
      background-color: #555555;
    }
  </style>
</head>

<body>
  <label>Station List</label>
  <div id="list" class="boxes"></div>

  <label>Station Selection Order</label>
  <div id="bids" class="boxes"></div>
  <div id="output" class="boxes"></div>

  <button class="button button-blue" id="submit" onclick="submit()">Submit</button>

</body>
<script>
  let stations = [
    "Station 20",
    "Station 21",
    "Station 22",
    "Station 23",
    "Station 24",
    "Station 25",
    "Station 60",
    "Station 61",
    "Station 63",
    "Station 70",
    "Station 71",
    "Station 72",
    "Station 73",
    "Station 74",
    "Station 75"
  ];

  let submit_btn = document.querySelector("#submit");
  let list = document.querySelector("#list");
  let bids = document.querySelector("#bids");
  let output = document.querySelector("#output");
  output.style.display = 'none';

  list.addEventListener("click", move);
  bids.addEventListener("click", move);

  loadStations();

  function move() {
    const isButton = event.target.nodeName === 'BUTTON';
    if (!isButton) {
      return;
    }
    let button = event.target;
    let pid = button.parentElement.id

    if (pid == "bids") {
      list.appendChild(button);
    } else {
      bids.appendChild(button);
    }
  }

  function loadStations() {
    list.innerHTML = "";
    for (station of stations) {
      list.innerHTML += `<button class="button button-blue">${station}</button>`;
    }
  }

  function submit() {
    output.style.display = 'block';
    list.style.display = 'none';
    bids.style.display = 'none';
    submit_btn.style.display = 'none';

    let i = 0;
    for (child of bids.children) {
      let station = child.innerText;
      if (station == undefined) {continue};
      i++;
      output.innerHTML += `${i}: ${station}<br>`;
    }

  }

</script>

</html>