Where we place the wildcard matters. Click on each button to see the difference between placing % at the beginning, end, or both.

<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>

#aWCTable {
display: none;
}
#WCaTable {
display: none;
}
#middleTable {
display: none;
}

#btnDiv {
text-align: center;
}

button {
margin: 0 3px 0 3px;
padding: 6px 14px 6px 14px;
border-radius: 20px;
font-weight: bold;
border: 3px solid aliceblue;
outline-color: #BFDAF9;
background-color: #D9E8FB;
color: #4D4D87;
font-size: 16px;
width: 90px;
}

.green {
color: #32B964;
}

h3{
margin-top: 0px;
color: #96BCEF;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
color: #4D4D87;
margin-top: 7px;
}

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;
margin-bottom: 0px;
}
</style>
</head>
<body id="main">

<div id="btnDiv">
<button id="startBtn">'<span class="green">%</span>a'</button>
<button id="endBtn">'a<span class="green">%</span>'</button>
<button id="middleBtn">'<span class="green">%</span>a<span class='green'>%</span>'</button>
</div>

<div id="baseTable">
<h2>writers</h2>
<table id="table">
<thead><tr><th title="Field #1">first_name</th>
<th title="Field #2">last_name</th>
</tr></thead>
<tbody>
<tr>
<td>Toni</td>
<td>Morrison</td>
</tr>
<tr>
<td>A</td>
<td>Milne</td>
</tr>
<tr>
<td>Ursula</td>
<td>Le Guin</td>
</tr>
<tr>
<td>Anne</td>
<td>Tyler</td>
</tr>
<tr>
<td>Mark</td>
<td>Twain</td>
</tr>
</tbody></table>
</div>

<div id="aWCTable">
<h2>writers</h2>
<h3>with first_name starting with 'a'</h3>
<table id="table">
<thead><tr><th title="Field #1">first_name</th>
<th title="Field #2">last_name</th>
</tr></thead>
<tbody>
<tr>
<td>A</td>
<td>Milne</td>
</tr>
<tr>
<td>Anne</td>
<td>Tyler</td>
</tr>
</tbody></table>
</div>

<div id="WCaTable">
<h2>writers</h2>
<h3>with first_name ending in 'a'</h3>
<table id="table">
<thead><tr><th title="Field #1">first_name</th>
<th title="Field #2">last_name</th>
</tr></thead>
<tbody>
<tr>
<td>A</td>
<td>Milne</td>
</tr>
<tr>
<td>Ursula</td>
<td>Le Guin</td>
</tr>
</tbody></table>
</div>

<div id="middleTable">
<h2>writers</h2>
<h3>with first_name containing 'a'</h3>
<table id="table">
<thead><tr><th title="Field #1">first_name</th>
<th title="Field #2">last_name</th>
</tr></thead>
<tbody>
<tr>
<td>A</td>
<td>Milne</td>
</tr>
<tr>
<td>Ursula</td>
<td>Le Guin</td>
</tr>
<tr>
<td>Anne</td>
<td>Tyler</td>
</tr>
<tr>
<td>Mark</td>
<td>Twain</td>
</tr>
</tbody></table>
</div>

</body>
</html>

<script>
document.getElementById("startBtn").addEventListener("click", function() {
let wildcardFirstTable = document.getElementById("WCaTable");
let wildcardLastTable = document.getElementById("aWCTable");
let twoWildcardTable = document.getElementById("baseTable");
let middleTable = document.getElementById("middleTable");

wildcardFirstTable.style.display = 'block';
wildcardLastTable.style.display = 'none';
twoWildcardTable.style.display = 'none';
middleTable.style.display = 'none';
});


document.getElementById("endBtn").addEventListener("click", function() {
let wildcardFirstTable = document.getElementById("WCaTable");
let wildcardLastTable = document.getElementById("aWCTable");
let twoWildcardTable = document.getElementById("baseTable");
let middleTable = document.getElementById("middleTable");

wildcardFirstTable.style.display = 'none';
wildcardLastTable.style.display = 'block';
twoWildcardTable.style.display = 'none';
middleTable.style.display = 'none';
});

document.getElementById("middleBtn").addEventListener("click", function() {
let wildcardFirstTable = document.getElementById("WCaTable");
let wildcardLastTable = document.getElementById("aWCTable");
let twoWildcardTable = document.getElementById("baseTable");
let middleTable = document.getElementById("middleTable");

wildcardFirstTable.style.display = 'none';
wildcardLastTable.style.display = 'none';
twoWildcardTable.style.display = 'none';
middleTable.style.display = 'block';
});
</script>
</body>
</html>]]>