How to retrieve textContent and display on checkbox input

I am trying to build a small program which you enter data into using input fields to build a set of unordered lists containing list items.

I have a checkbox of which that when it is checked, i would like it to display the entire unordered list that contains that bit of text, in this case, atlanta. I would like the rest of the unordered lists which do not contain this text to be set to display:none;

The for loop is the issue, though I have been playing around all day and cannot behave as I would like.

This is the code in question I believe:

checkboxInput.addEventListener('change', (e) => {
  const isChecked = e.target.checked;
  let ulList = document.getElementsByTagName('ul');
  let liList = document.getElementsByTagName('li');
  let locationList = document.getElementsByClassName('location');

   if (isChecked) {
    for (let i = 0; i < ulList.length; i += 1) {
      for (let j = 0; j < liList.length; j += 1) {
        let ul = ulList[i];
      let li = liList[i]; 
        if (li.children.textContent == 'atlanta') {
        ul.style.display = '';
      } else {
        ul.style.display = 'none';
      }
      } 
    }
   }  
});

Please see a jsFiddle link here.

Any help much appreciated.