Tengo mi HTML, y yo quiero crear dentro del div con la clase nums, un contador de unas tablas que se crean mediante una base en SQL, la tabla la tengo así:
<div class="card-body">
<h5>Tabla de Resultados de Football</h5>
<p id="tables-count"></p>
<hr>
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Name Team 1</th>
</tr>
</thead>
<tbody>
<?php
while($rows = mysqli_fetch_assoc($result_football)){
?>
<tr class="align-middle table-football">
<th scope="row"><?php echo $rows['id']; ?></th>
<td><?php echo $rows['date_soccer']; ?></td>
<td><?php echo $rows['team_soccer_1']; ?></td>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
Y justo abajo de esta tabla tengo este div con un id, y quiero mediante js crear un botón que separe las tablas mediante números (ósea 1 2 3 4 5 ...), y bueno, quiero que cada 5 tablas se cree un botón, a continuación es donde quiero que mediante js con algún algoritmo se cree los botones a medida que se crean las tablas, y a la vez pueda seleccionar un botón y que me muestre las tablas que estén en esa sección ósea (sección 1 2 ...), no se si me explico
<div class="table_nums">
<div class="nums" id="nums-foot">
</div>
</div>
estaba intentando algo en js pero no encuentro la manera de poder hacer lo que quiero lograr, simplemente que cada 5 tablas que se cree, se inserte en un div un botón con una clase un id y un valor de un numero (eso dependería de cuantas tablas hay, ya que quiero que cada 5 tablas se cree un botón, entonces si hay 15 tablas, van a crearse 3 botones 1, 2 y 3) y de esta manera esconder las tablas que se van creando con PHP con js, ya que si selecciono el botón de sección 3 me muestre los últimos 5 creados nomas, y si selecciono el botón de sección 1 me muestre los primeros 5 creados.
No sirvo para explicarme, espero que me sepan entender, hace tiempo que estoy con lo mismo y no encuentro tutoriales ni ninguna pagina que explique bien como hacer :)