<div>
<script>
function showPaginatedPage(el, index){
    const container = el.parentElement.querySelector('div');
    for (var i = 0; i<container.children.length; i++){
        container.children[i].style.display = i == index ? 'block' : 'none';
    }
}
</script>

<button onclick="showPaginatedPage(this, 0)">
Page 1
</button>

<button onclick="showPaginatedPage(this, 1)">
Page 2
</button>

<button onclick="showPaginatedPage(this, 2)">
Page 3
</button>

<button onclick="showPaginatedPage(this, 3)">
Page 4
</button>

<div>
<div style="display:block">
<h3>Page 1</h3>
<table class="st-1b0701b8">
    <style>
        .st-1b0701b8 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }

        .st-1b0701b8 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
        }

        .st-1b0701b8 br {
            line-height: 0em;
            margin: 0;
        }

        .st-1b0701b8 sub {
            line-height: 0;
        }

        .st-1b0701b8 sup {
            line-height: 0;
        }
    </style>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group1</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="text-align:center;">a</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group2</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td style="text-align:center;">e</td>
        <td style="text-align:center;">f</td>
    </tr>
    <tr>
        <td style="font-weight:bold;text-align:left;">group3</td>
        <td colspan="2" style="font-weight:bold;text-align:center;">value1</td>
    </tr>
        <tr><td colspan="3" style="border-bottom:1px solid currentColor;padding:0"></td></tr>    <tr>
        <td style="text-align:left;">c</td>
        <td style="text-align:center;">1</td>
        <td style="text-align:center;">2</td>
    </tr>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
</table>
</div>
<div style="display:none">
<h3>Page 2</h3>
<table class="st-c0824370">
    <style>
        .st-c0824370 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }

        .st-c0824370 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
        }

        .st-c0824370 br {
            line-height: 0em;
            margin: 0;
        }

        .st-c0824370 sub {
            line-height: 0;
        }

        .st-c0824370 sup {
            line-height: 0;
        }
    </style>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group1</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="text-align:center;">b</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group2</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td style="text-align:center;">e</td>
        <td style="text-align:center;">f</td>
    </tr>
    <tr>
        <td style="font-weight:bold;text-align:left;">group3</td>
        <td colspan="2" style="font-weight:bold;text-align:center;">value1</td>
    </tr>
        <tr><td colspan="3" style="border-bottom:1px solid currentColor;padding:0"></td></tr>    <tr>
        <td style="text-align:left;">c</td>
        <td style="text-align:center;">5</td>
        <td style="text-align:center;">6</td>
    </tr>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
</table>
</div>
<div style="display:none">
<h3>Page 3</h3>
<table class="st-4066ae2a">
    <style>
        .st-4066ae2a {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }

        .st-4066ae2a tr td {
            vertical-align: top;
            padding: 0;
            border: none;
        }

        .st-4066ae2a br {
            line-height: 0em;
            margin: 0;
        }

        .st-4066ae2a sub {
            line-height: 0;
        }

        .st-4066ae2a sup {
            line-height: 0;
        }
    </style>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group1</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="text-align:center;">a</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group2</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td style="text-align:center;">e</td>
        <td style="text-align:center;">f</td>
    </tr>
    <tr>
        <td style="font-weight:bold;text-align:left;">group3</td>
        <td colspan="2" style="font-weight:bold;text-align:center;">value1</td>
    </tr>
        <tr><td colspan="3" style="border-bottom:1px solid currentColor;padding:0"></td></tr>    <tr>
        <td style="text-align:left;">d</td>
        <td style="text-align:center;">3</td>
        <td style="text-align:center;">4</td>
    </tr>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
</table>
</div>
<div style="display:none">
<h3>Page 4</h3>
<table class="st-76ae7861">
    <style>
        .st-76ae7861 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }

        .st-76ae7861 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
        }

        .st-76ae7861 br {
            line-height: 0em;
            margin: 0;
        }

        .st-76ae7861 sub {
            line-height: 0;
        }

        .st-76ae7861 sup {
            line-height: 0;
        }
    </style>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group1</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="text-align:center;">b</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td colspan="2" style="font-weight:bold;border-bottom:1px solid currentColor; padding-bottom: 0.25em;text-align:center;">group2</td>
    </tr>
    <tr>
        <td style="text-align:center;"></td>
        <td style="text-align:center;">e</td>
        <td style="text-align:center;">f</td>
    </tr>
    <tr>
        <td style="font-weight:bold;text-align:left;">group3</td>
        <td colspan="2" style="font-weight:bold;text-align:center;">value1</td>
    </tr>
        <tr><td colspan="3" style="border-bottom:1px solid currentColor;padding:0"></td></tr>    <tr>
        <td style="text-align:left;">d</td>
        <td style="text-align:center;">7</td>
        <td style="text-align:center;">8</td>
    </tr>
    <tr><td colspan="3" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
</table>
</div>
</div>
</div>
