<div>
<button onclick="
    [...this.parentElement.querySelector('div').children].forEach((e,j) => e.style.display = j==0 ? 'block' : 'none');
">Page 1</button>

<button onclick="
    [...this.parentElement.querySelector('div').children].forEach((e,j) => e.style.display = j==1 ? 'block' : 'none');
">Page 2</button>

<button onclick="
    [...this.parentElement.querySelector('div').children].forEach((e,j) => e.style.display = j==2 ? 'block' : 'none');
">Page 3</button>

<button onclick="
    [...this.parentElement.querySelector('div').children].forEach((e,j) => e.style.display = j==3 ? 'block' : 'none');
">Page 4</button>

<div>
<div style="display:block">
<h3>Page 1</h3>
<table id="st-c1e1818a">
    <style>
        #st-c1e1818a {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }
        #st-c1e1818a tr {
            background-color: transparent;
            border: none;
        }
        #st-c1e1818a tr td {
            vertical-align: top;
            padding: 0;
            border: none;
            background-color: transparent;
        }
        #st-c1e1818a br {
            line-height: 0em;
            margin: 0;
        }
        #st-c1e1818a sub {
            line-height: 0;
        }
        #st-c1e1818a 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 id="st-42dc7aa5">
    <style>
        #st-42dc7aa5 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }
        #st-42dc7aa5 tr {
            background-color: transparent;
            border: none;
        }
        #st-42dc7aa5 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
            background-color: transparent;
        }
        #st-42dc7aa5 br {
            line-height: 0em;
            margin: 0;
        }
        #st-42dc7aa5 sub {
            line-height: 0;
        }
        #st-42dc7aa5 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 id="st-0ee84d22">
    <style>
        #st-0ee84d22 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }
        #st-0ee84d22 tr {
            background-color: transparent;
            border: none;
        }
        #st-0ee84d22 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
            background-color: transparent;
        }
        #st-0ee84d22 br {
            line-height: 0em;
            margin: 0;
        }
        #st-0ee84d22 sub {
            line-height: 0;
        }
        #st-0ee84d22 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 id="st-826f3fd3">
    <style>
        #st-826f3fd3 {
            border: none;
            margin: 0 auto;
            padding: 0.25rem;
            border-collapse: separate;
            border-spacing: 0.85em 0.2em;
            line-height: 1.2em;
        }
        #st-826f3fd3 tr {
            background-color: transparent;
            border: none;
        }
        #st-826f3fd3 tr td {
            vertical-align: top;
            padding: 0;
            border: none;
            background-color: transparent;
        }
        #st-826f3fd3 br {
            line-height: 0em;
            margin: 0;
        }
        #st-826f3fd3 sub {
            line-height: 0;
        }
        #st-826f3fd3 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>
