JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="show_hide" rel="#slidingDiv_1"> Show Datums </a> <br />
            <div id="slidingDiv_1" style="padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
                <div class="paginate">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>b</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                    </ul>
                </div>
            </div>
 <br/>
 <a href="#" class="show_hide" rel="#slidingDiv_2"> Show Datums </a> <br />
            <div id="slidingDiv_2" style="padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
                <div class="paginate">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>a</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
           ...

CSS

a {
    cursor:pointer;
}

JavaScript

function check_navigation_display(el) {
//accepts a jQuery object of the containing div as a parameter
if ($(el).find('ul').children('li').first().is(':visible')) {
    $(el).show();
}

if ($(el).find('ul').children('li').last().is(':visible')) {
    $(el).show();
}    
}

(function ($) {

$('div.paginate').each(function () {
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    check_navigation_display($(this));

    $(this).find('.next').click(function () {
        var last = $(this).siblings('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
        check_navigation_display($(this).closest('div'));
    });

    $(this).find('.prev').click(function () {
        var first = $(this).siblings('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
        check_navigation_display($(this).closest('div'));
    });

});
    
    
})(jQuery);
$('.show_hide').click(function(e){
	e.preventDefault();
	var $this = $(this);
	var $text = ($(this).text().trim() == "Show Datums") ? "Hide Datums" : "Show Datums";
	$this.text($text);
	$($this.attr('rel')).slideToggle();
});