JSFiddle - React, Tailwind, and code Playground

by Aldi Unanto

HTML

<div class="full" >
            <table class="flat-table flat-table-2" width="70%" style="margin:auto;">
                <tr><th>numbers</th><th>address</th></tr>
                <tr class="page1"><td>3</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>5</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
                <tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>

                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
                <tr class="page2"><td>2</td><td><a href="#">test</a></td></tr>
               ...

CSS

.page3, .page2{ display: none; }

JavaScript

$(function(){
    $('.footer-pop a').on('click', function(e){
        e.preventDefault();
        
        $('tr[class^="page"]').hide();
        $('tr.' + $(this).attr('data-tr')).show();
    });
});