Basic Help in HTML - html

Question

I just needed some help in HTML for a project. In our project, we have various html files that represent different pages of the same website. There is one "outline" html file and the other files extend this main template. In each html file, it generates a table(sometimes many tables) holding some data. My task is to add a button that can download the table if clicked on. How do I write HTML code that automatically puts the button next to each table when generated. (i.e if 4 tables were generated there should be 4 buttons, if there are 3 tables there should be 3 buttons). I have already got the code for the button and its image, but I do not really know how to do the task I described. I am quite new to this language so any type of help or a pointer in the right direction would be helpful!
I have placed the code for the button(its shape, logo, and color) in the "layout" html file, the file which is getting extended by all other html files in our project
This is the code that is in the template html file:
<style>
.button{
position: absolute;
left: 100px;
top: 150px;
height: 40px;
width: 40px;
padding: 0;
background : #fff;
border: none;
outline: none;
border-radius: 0px;
overflow: hidden;
font-size: 30px;
font-weight: 500;
}
.button:hover{
background: #D4D7D9
}
.button:active {
background: #D4D7D9
}
.button__icon {
align-items: center;
padding: 0px;
color: #000;
height: 100%;
}
</style>
<button type="button" class="button">
<span class="button__icon">
<ion-icon name="cloud-download-outline"></ion-icon>
</span>
</button>
This is the code for the html file in which it only requires one button because there is only one table that gets generated max. Once again, it extends the template html code which was just displayed above.
<table id="data" class="table table-striped">
<thead>
<tr>
<th>Pokemon</th>
<th>Defense</th>
<th>Attack</th>
</tr>
</thead>
<tbody>
{% for key in data %}
<tr>
<td>{{ key }}</td>
<td>{{ data[key][0] }}</td>
<td>{{ data[key][1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
And this is the code for the html pages that require multiple tables to be generated, and for as many tables there needs to be one corresponding button. The button should be in the same place relative to each table.
{% block script %}
<script>
function toggleTable(event) {
// get the click event
let element = event.target;
console.log(element)
// get the table
let table = document.getElementById(element.innerHTML);
console.log(table)
// get the current value of the table's display property
let displaySetting = table.style.display;
// now toggle the table depending on current state
if (displaySetting == 'inline-table') {
// table is visible. hide it
table.style.display = 'none';
}
else {
// table is hidden. show it
table.style.display = 'inline-table';
}
}
</script>
{% endblock %}
{% block main %}
<h1>Further Pokemon Breakdown</h1>
{% for key in data %}
<h3 onclick="toggleTable(event)">{{ key }}</h3>
<table class="table table-striped table-hover border-bottom" id={{ key }} style="display: inline-table;">
<thead>
<tr>
<th>Pokemon</th>
<th>Attack</th>
<th>Defense</th>
</tr>
</thead>
<tbody>
{% for key2 in data[key] %}
<tr>
<td>{{ key2 }}</td>
<td>{{ data[key][key2][0] }}</td>
<td>{{ data[key][key2][1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
Thanks for the help!!!