Making a filter

I’m amateur in web coding. I’m trying to make some kind of a filter, and I need some help with minimum change on my codes. I believe there must be a practical solution for what I want to do, and wanted to ask for your correction, please.

Button01 hides/shows all elements with the class name filter01,
Button02 hides/shows all elements with the class name filter02,
So, both of the buttons have control over ElementX.
What I want to do is, when a button is clicked once, ElementX must remain hidden until it’s clicked again, even when the other button is also clicked after.

HTML:

<div class=”button01″ onclick=”filter01()”>Filter 01</div>
<div class=”button02″ onclick=”filter02()”>Filter 02</div>

<div class=”filter01 filter02″>ElementX</div></a>

JS:

function filter01() {
var i;
var filter = document.getElementsByClassName(“filter01”);
for (i=0; i<filter.length; i++) {
if (filter[i].style.display) {filter[i].style.display = null; button01.style.color = null;}
else {filter[i].style.display = “none”; button01.style.color = “rgb(200,200,200)}
}
}
function filter02() {
var i;
var filter = document.getElementsByClassName(“filter02”);
for (i=0; i<filter.length; i++) {
if (filter[i].style.display) {filter[i].style.display = null; button02.style.color = null;}
else {filter[i].style.display = “none”; button.style.color = “rgb(200,200,200)}
}
}