Why are my JS element filters not working?

I want to create a filter where clicking on each box will remove any elements which don't match that description. I have tried adding some code found on W3 but this isn't working for me:
https://www.w3schools.com/howto/howto_js_filter_elements.asp

When I click on the boxes nothing is filtered off the page.

Image of project

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Filters
filterSelection("all");
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
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++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(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 w3RemoveClass(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(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
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";
});
}

<!-- language: lang-css -->

/*FILTERS*/
.filter-container {
overflow: hidden;
}
.filterDiv {
float: left;
background-color: #2196f3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
/* Hidden by default */
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
/* Add a light grey background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
background-color: #666;
color: white;
}

<!-- language: lang-html -->

<!--FILTER BUTTONS-->
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">
Show all
</button>
<button class="btn" onclick="filterSelection('red')">Red</button>
<button class="btn" onclick="filterSelection('yellow')">Yellow</button>
<button class="btn" onclick="filterSelection('blue')">Blue</button>
<button class="btn" onclick="filterSelection('green')">Green</button>
</div>
<!--THE TABLE-->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p id="modalText"></p>
</div>
</div>
<div id="container"></div>
<div class="periodic-table" class="filter-container">
<div class="empty-space-1"></div>
<div class="empty-space-2"></div>
<button class="open-modal" class="filterDiv yellow" data-id="h1">
<div class="periodic-element one">
<div class="periodic-table-inner">
<div class="title">h1</div>
<div class="desc">Large Heading</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv yellow" data-id="style">
<div class="periodic-element one">
<div class="periodic-table-inner">
<div class="title">Style</div>
<div class="desc">Styling</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="anchor">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">A</div>
<div class="desc">Anchor</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="comment">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">!-></div>
<div class="desc">Comment</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="svg">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">Svg</div>
<div class="desc">Svg Image</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv red" data-id="ul">
<div class="periodic-element four">
<div class="periodic-table-inner">
<div class="title">Ul</div>
<div class="desc">Unordered List</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv red" data-id="br">
<div class="periodic-element four">
<div class="periodic-table-inner">
<div class="title">Br</div>
<div class="desc">Line Break</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv yellow" data-id="li">
<div class="periodic-element one">
<div class="periodic-table-inner">
<div class="title">Li</div>
<div class="desc">List</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv yellow" data-id="ol">
<div class="periodic-element one">
<div class="periodic-table-inner">
<div class="title">Ol</div>
<div class="desc">Ordered List</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="img">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">Img</div>
<div class="desc">Image</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="nav">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">Nav</div>
<div class="desc">Navigation</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="em">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Em</div>
<div class="desc">Emphasized</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="div">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Div</div>
<div class="desc">Groups Elements</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="link">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Link</div>
<div class="desc">External Link</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv red" data-id="i">
<div class="periodic-element four">
<div class="periodic-table-inner">
<div class="title">I</div>
<div class="desc">Italic</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv red" data-id="u">
<div class="periodic-element four">
<div class="periodic-table-inner">
<div class="title">U</div>
<div class="desc">Underlined</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv red" data-id="b">
<div class="periodic-element four">
<div class="periodic-table-inner">
<div class="title">B</div>
<div class="desc">Bold text</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="col">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Col</div>
<div class="desc">Column Properties</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="data">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Data</div>
<div class="desc">M-R Data</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="body">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">Body</div>
<div class="desc">Main Content</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv green" data-id="dfn">
<div class="periodic-element three">
<div class="periodic-table-inner">
<div class="title">Dfn</div>
<div class="desc">Defined term</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="title">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Title</div>
<div class="desc">Tab Title</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv blue" data-id="meta">
<div class="periodic-element two">
<div class="periodic-table-inner">
<div class="title">Meta</div>
<div class="desc">Metadata</div>
</div>
</div>
</button>
<button class="open-modal" class="filterDiv yellow data-id=" abbr ">
<div class="periodic-element one ">
<div class="periodic-table-inner ">
<div class="title ">Abbr</div>
<div class="desc ">Abbreviation</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv red " data-id="form ">
<div class="periodic-element four ">
<div class="periodic-table-inner ">
<div class="title ">Form</div>
<div class="desc ">Form for User</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv red " data-id="h6 ">
<div class="periodic-element four ">
<div class="periodic-table-inner ">
<div class="title ">h6</div>
<div class="desc ">Small Heading</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv green " data-id="main ">
<div class="periodic-element three ">
<div class="periodic-table-inner ">
<div class="title ">Main</div>
<div class="desc ">Main Content</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv yellow " data-id="html ">
<div class="periodic-element one ">
<div class="periodic-table-inner ">
<div class="title ">Html</div>
<div class="desc ">Root HTML</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv green " data-id="p ">
<div class="periodic-element three ">
<div class="periodic-table-inner ">
<div class="title ">P</div>
<div class="desc ">Paragraph</div>
</div>
</div>
</button>
<button class="open-modal " class="filterDiv green " data-id="href ">
<div class="periodic-element three ">
<div class="periodic-table-inner ">
<div class="title ">Href</div>
<div class="desc ">URL</div>
</div>
</div>
</button>
</div>

<!-- end snippet -->

Your HTML is not right:

• There is an unclosed attribute here:

  <button class="open-modal" class="filterDiv yellow data-id=" abbr ">
  

  Add the missing double quote after "yellow".

• You have double class attributes... The earlier one will take precedence. So join all those double attributes into one:

  <button class="open-modal filterDiv yellow" data-id=" abbr ">
  

@trincot's fix works, and should be the accepted answer.

but I'd like to suggest some improvements to the javascript code:

// Filters
filterSelection("all");

// Adds the "show" class to selected elements, and removes it from unselected
function filterSelection(c) {
  let elements = document.querySelectorAll('.filterDiv'); 
  elements.forEach((el) => {
    if( c == 'all' || el.classList.contains(c) )
      el.classList.add('show')
    else
      el.classList.remove('show');
  });
}

// w3AddClass and w3RemoveClass is not needed

// Add active class to the current control button (highlight it)
let btns = document.querySelectorAll("#myBtnContainer btn");
btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    var current = document.querySelector("active");
    current.classList.remove('active');
    this.classList.add('active');
  });
});

W3Schools is doing alot of unnecessary stuff here, probably to show of some syntax and features of the language. In this case reinventing the wheels for basic built-in functions like adding and removing classes.

It's a resource intended for learning, and not a good place to copy code for use in production.