Four select option boxes dynamically change upon each select box option

I'm trying to make it where if a user selects an option on the first select box, the content will change for the second select box and so forth. Including if whatever the user selects for first and second select options, it too changes what is in the third select box and so forth. However, with what I have so far, I'm running into some issues. Currently it works if done correctly, following the flow of each select box, but I noticed there are ways to still get around it. Is there a way to hide all select boxes except for the first one, and when the first option is selected, the second select box appears and so forth?

Am I making this way to complicated? Is there an easier way to accomplish this same goal? I look forward to your responses.

HTML:

<!-- START OF ADDING LOCATIONS -->
<select id="select1" class="ad_inquiry_locations" value="" name="guest_pl" required>

    <option value="" selected disabled>Select primary location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>

<!-- Start of SECOND GROUP -->
<select id="select2" class="ad_inquiry_locations" value="" name="guest_al-2">

    <option value="" selected disabled>Add a location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>
<!-- End of SECOND GROUP -->

<!-- Start of THIRD GROUP -->
<select id="select3" class="ad_inquiry_locations" value="" name="guest_al-3">

    <option value="" selected disabled>Add a location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>
<!-- End of THIRD GROUP -->

<!-- Start of FOURTH GROUP -->
<select id="select4" class="ad_inquiry_locations" value="" name="guest_al-4">

    <option value="" selected disabled>Add a location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>
<!-- End of FOURTH GROUP -->
<!-- END OF ADDING LOCATIONS -->

JS:

var Lists = [
    document.getElementById("select1"),
    document.getElementById("select2"),
    document.getElementById("select3"),
    document.getElementById("select4")
  ],
  nbLists = Lists.length;


// Binds change events to each list
for (var iList = 0; iList < nbLists; iList++) {
  Lists[iList].onchange = RemoveItems(iList);
}


function RemoveItems(iList) {
  return function() {
    var value = [];

    // Add the selected items of all previous lists including the one changed
    for (var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);


    // Hide in all succeeding lists these items
    for (var kList = iList + 1; kList < nbLists; kList++)
      HideItems(kList, value);
  }
}


// Hide items selected in previous lists in all next lists
function HideItems(iList, value) {
  var nbOptions = Lists[iList].options.length,
    nbValues = value.length,
    found;

  if (nbValues === 0) return;

  for (var iOption = 0; iOption < nbOptions; iOption++) {
    // Find if this element is present in the previous lists
    found = false;
    for (var iValue = 0; iValue < nbValues; iValue++) {
      if (Lists[iList].options[iOption].text === value[iValue]) {
        found = true;
        break;
      }
    }

    // If found, we hide it
    if (found) {
      Lists[iList].options[iOption].style.display = "none";
      Lists[iList].options[iOption].selected = "";
    }
    // else we un-hide it (in case it was previously hidden)
    else
      Lists[iList].options[iOption].style.display = "";
  }
}

You can use CSS. Simply hide all your selections at the beginning (except of your 1st one) just by adding a specific class to them.

<select id="select2" class="ad_inquiry_locations hide" value="" name="guest_al-2"> ...

Also define the CSS class.

.hide {
  display: none;
}

Now you can remove the class after selecting an option, i.e. like so.

function RemoveItems(iList) {
  return function() {
    Lists[iList + 1].classList.remove('hide');
    ...

This is just a prototype and will lead to an error since index 3 + 1 won't exist. So adjust that to your desires. You can also hide your selections again by just adding the class .hide.

Lists[iList + 1].classList.add('hide');
...

Demo