Sometimes we want to set different value options, like customers where the country property is France or Germany.

Click the buttons and check out the difference.

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>

#germanyTable {
display: none;
}
#franceTable {
display: none;
}
#bothTable {
display: none;
}

#germanyBtn {
width: 48%;
}
#franceBtn {
width: 48%;
}
#bothBtn {
width: 100%;
}

.btnDiv {
text-align: center;
}

button {
margin: 0 3px 5px 3px;
padding: 4px 12px 4px 12px;
border-radius: 20px;
font-weight: bold;
border: 3px solid aliceblue;
outline-color: #BFDAF9;
background-color: #D9E8FB;
color: #4D4D87;
font-size: 15px;
}

.green {
color: #32B964;
}

.lightBlue {
color: #96BCEF;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
color: #4D4D87;
}

thead {
background-color: #4D4D87;
color: white;
}

/* change border color here */
td, th {
border: 1px solid #96BCEF;
text-align: left;
padding: 8px;
}

/* Change color for every second row */
tr:nth-child(even) {
background-color: #D9E8FB;
}

h2 {
color: #4D4D87;
}
h3 {
color: #4D4D87;
}
</style>
</head>
<body id="main">

<div class="btnDiv">
<button id="germanyBtn">Germany</button>
<button id="franceBtn">France</button>
</div>
<div class="btnDiv">
<button id="bothBtn">France <span class="green">or</span> Germany</button>
</div>

<div id="baseTable">
<h2>customers</h2>
<table>
<thead><tr><th title="Field #1">name</th>
<th title="Field #2">country</th>
</tr></thead>
<tbody><tr>
<td>Maria Sousa</td>
<td>Brazil</td>
</tr>
<tr>
<td>Paul Wagner</td>
<td>Germany</td>
</tr>
<tr>
<td>Sara Sato</td>
<td>Japan</td>
</tr>
<tr>
<td>Louis Martin</td>
<td>France</td>
</tr>
</tbody></table>
</div>

<div id="germanyTable">
<h3>customers <span class="lightBlue">from Germany</span></h3>
<table>
<thead><tr><th title="Field #1">name</th>
<th title="Field #2">country</th>
</tr></thead>
<tbody>
<tr>
<td>Paul Wagner</td>
<td>Germany</td>
</tr>
</tbody></table>
</div>

<div id="franceTable">
<h3>customers <span class="lightBlue">from France</span></h3>
<table>
<thead><tr><th title="Field #1">name</th>
<th title="Field #2">country</th>
</tr></thead>
<tbody>
<tr>
<td>Louis Martin</td>
<td>France</td>
</tr>
</tbody></table>
</div>

<div id="bothTable">
<h3>customers <span class="lightBlue">from France or Germany</span></h3>
<table>
<thead><tr><th title="Field #1">name</th>
<th title="Field #2">country</th>
</tr></thead>
<tbody>
<tr>
<td>Paul Wagner</td>
<td>Germany</td>
</tr>
<tr>
<td>Louis Martin</td>
<td>France</td>
</tr>
</tbody></table>
</div>

</body>
</html>

<script>document.getElementById("germanyBtn").addEventListener("click", function() {
let germanyTable = document.getElementById("germanyTable");
let franceTable = document.getElementById("franceTable");
let baseTable = document.getElementById("baseTable");
let bothTable = document.getElementById("bothTable");

germanyTable.style.display = 'block';
franceTable.style.display = 'none';
baseTable.style.display = 'none';
bothTable.style.display = 'none';
});

document.getElementById("franceBtn").addEventListener("click", function() {
let germanyTable = document.getElementById("germanyTable");
let franceTable = document.getElementById("franceTable");
let baseTable = document.getElementById("baseTable");
let bothTable = document.getElementById("bothTable");

germanyTable.style.display = 'none';
franceTable.style.display = 'block';
baseTable.style.display = 'none';
bothTable.style.display = 'none';
});

document.getElementById("bothBtn").addEventListener("click", function() {
let germanyTable = document.getElementById("germanyTable");
let franceTable = document.getElementById("franceTable");
let baseTable = document.getElementById("baseTable");
let bothTable = document.getElementById("bothTable");

germanyTable.style.display = 'none';
franceTable.style.display = 'none';
baseTable.style.display = 'none';
bothTable.style.display = 'block';
});
</script>
</body>
</html>]]>

Make sure to type =.