Generate array from populated elements in JavaScript

I'm trying to build a 2 stage filter that shows and hides elements from a list. The first stage shows and hides elements based on static selection options.

The second stage shows and hides elements based on selection options from a list of variables that grows over time

I have successfully put together some of the JavaScript and the first stage of filtering with the information available online.

I'm struggling with the second stage (for the past 2 weeks) I understand what I need to do but putting it down in JavaScript doesn't seem to work for me. Everything I try fails.

I understand most of what I need to do (I guess...):

1. Capture all the checkbox values and push them into an array.
2. Turn them into an index.

3. Loop though the list and compare the index array against all the elements presenting the class "show".

   3a. Run conditional statement that checks for matches with tag <h6> content and remove class "show" if no match found.

I think I have some the pieces but cant put them together correctly. I hope I gave enough information.

Please help, I am totally new at JavaScript.

Also, can anyone tell me the technical term for a list filtering system like this?

function openPage(pageName, elmnt) {
  // Hide all elements with class="tabcontent" by active */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("projectStatus");
var btns = btnContainer.getElementsByClassName("tablink");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}



// Get the element with id="activeOpen" and click on it
document.getElementById("defaultOpen").click();



//filtering elements
filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("result-thumb");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    ekRemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) ekAddClass(x[i], "show");
  }
}

// Show filtered elements
function ekAddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}


// Hide elements that are not selected
function ekRemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}


//Clear all selections from filterring form and show all results
function clearAllSelected() {
  var checkboxes = new Array();
  checkboxes = document.getElementsByTagName('input');

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == 'checkbox') {
      checkboxes[i].checked = false;
    }
  }
  document.getElementById('showAll').click();
}

.result-thumb {
  border: 1px solid #000;
  display: none;
  margin: 15px;
  padding: 3px;
}

.show {
  display: block;
}

h6,
p {
  padding: 0;
  margin: 0;
}

li {
  display: block;
}

<div id="projectStatus" class="tabs-buttons">
  <button class="tablink" onclick="filterSelection('current');" id="defaultOpen">Active Projects</button>
  <button class="tablink active" onclick="filterSelection('past');">Past Projects</button>
  <button class="tablink" onclick="filterSelection('all');">All Projects</button>
</div>
<div id="PastProjects" class="tabcontent">
  <p>Choose an area of focus</p>
  <li><input type="checkbox" name="vehicle1" value="Deirdre" oninput="filterCheck()" id="select-aofi"> Bob</li>
  <li><input type="checkbox" name="vehicle1" value="Bill" oninput="filterCheck()" id="select-aofi"> David</li>
  <li><input type="checkbox" name="vehicle1" value="Teresa" oninput="filterCheck()" id="select-aofi"> Teresa</li>
</div>

<div class="result-thumb current">
  <p>Current: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6 class="">David</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Teresa</h6>
</div>
<!-- end.result-thumb -->

<div class="result-thumb past">
  <p>Past: Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
  <h6>Bob</h6>
</div>
<!-- end.result-thumb -->