In my first map (https://codepen.io/flyinginsect2/pen/oNoQvNQ), the checkbox filters in the modal popup seem to work just fine. However, when I move the filters to a new div (https://codepen.io/flyinginsect2/pen/QWOJqRq), they stop working. The HTML checkboxes and Javascript event listeners haven't changed. The only thing that has changed is moving the boxes from one div to another. I thought maybe it had to do with the z-indexes (but they're the same in each) or the position value (but changing that doesn't fix it). In a previous question, someone told me to use my browser's debugger, but I'm fairly inexperienced and couldn't figure it out using that.

Modal div checkboxes:

  <div id="myModal" class="modal">

    <div class="modal-content">
      <span class="close">&times;</span>
      <h3>Project Categories</h3>

      <input type="checkbox" id="srBox" name="srBox" value="SustainableRecreation">
      <label for="srBox"> Sustainable Recreation</label><br>

      <input type="checkbox" id="hlBox" name="hlBox" value="HealthyLandscapes">
      <label for="hlBox"> Healthy Landscapes</label><br>

      <input type="checkbox" id="ovBox" name="ovBox" value="Overnight">
      <label for="ovBox"> Overnight</label><br>

    </div>

  </div>

Modal div CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 13%;
  font-family: 'DM Sans', sans-serif;
  background-color: white;
}

New div checkboxes CSS:

#filterMenu {
    position: absolute;
    font-size: 15px;
    display: block;
    margin: 0;
    padding: 10px;
    font-family: 'DM Sans', sans-serif;
    background: #ffffff;
    z-index: 1;
    top: 10px;
    left: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

New div checkboxes HTML:

  <div id="filterMenu">

    <h3>Project Categories</h3>

    <input type="checkbox" id="srBox" name="srBox" value="SustainableRecreation">
    <label for="srBox"> Sustainable Recreation</label><br>

    <input type="checkbox" id="hlBox" name="hlBox" value="HealthyLandscapes">
    <label for="hlBox"> Healthy Landscapes</label><br>

    <input type="checkbox" id="ovBox" name="ovBox" value="Overnight">
    <label for="ovBox"> Overnight</label><br>

  </div>

Event listeneners:

var filters = {};

function updateFilters() {
  var compositeFilter = ['all'];
  for (let filterValue in filters) {
    if (filters[filterValue]) {
      compositeFilter.push(['==', ['get', filterValue], 'Y']);
    }
  }
  if (compositeFilter.length > 1)
    map.setFilter('rfovProjects', compositeFilter);
  else {
    map.setFilter('rfovProjects', null);
  }
}

var checkbox = document.getElementById('srBox');
checkbox.addEventListener('change', function() {
  filters['SR'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('hlBox');
checkbox.addEventListener('change', function() {
  filters['HL'] = this.checked;
  updateFilters();
});

var checkbox = document.getElementById('ovBox');
checkbox.addEventListener('change', function() {
  filters['OV'] = this.checked;
  updateFilters();
});