JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">Type
    <select id="type" style="margin-left:57px; width:153px;">
        <option value="all">ALL</option>
        <option value="type1">Type1</option>
        <option value="type2">Type2</option>
        <option value="type3">Type3</option>
    </select>
</div>
<div class="data_cat">
    <div class="data-type1" id="0">type10</div>
    <div class="data-type2" id="0">type20</div>
    <div class="data-type3" id="0">type30</div>
    <div class="data-type1" id="1">type11</div>
    <div class="data-type2" id="1">type21</div>
    <div class="data-type3" id="1">type31</div>
    <div class="data-type1" id="2">type12</div>
    <div class="data-type2" id="2">type22</div>
    <div class="data-type3" id="2">type32</div>
    <div class="data-type1" id="3">type13</div>
    <div class="data-type2" id="3">type23</div>
    <div class="data-type3" id="3">type33</div>
    <div class="data-type1" id="4">type14</div>
    <div class="data-type2" id="4">type24</div>
    <div class="data-type3" id="4">type34</div>
    <div class="data-type1" id="5">type15</div>
    <div class="data-type2" id="5">type25</div>
    <div class="data-type3" id="5">type35</div>
    <div class="data-type1" id="6">type16</div>
    <div class="data-type2" id="6">type26</div>
    <div class="data-type3" id="6">type36</div>
    <div class="data-type1" id="7">type17</div>
    <div class="data-type2" id="7">type27</div>
    <div class="data-type3" id="7">type37</div>
    <div class="data-type1" id="8">type18</div>
    <div class="data-type2" id="8">type28</div>
    <div class="data-type3" id="8">type38</div>
    <div class="data-type1" id="9">type19</div>
    <div class="data-type2" id="9">type29</div>
    <div class="data-type3" id="9">type39</div>
    <div class="data-type1" id="10">type10</div>
    <div class="data-type2" id="10">type20</div>
    <div class="data-type3" id="10">type30</div>
</div>
<div class="page"> 
    <a class="all" id="active">1</a>
    <a class="all">2</a>
    <a...

CSS

div.page {
    margin-top:20px;
    text-align:center;
}
div.page a {
    margin-left:10px;
}
div.page a#active {
    color:blue;
    background-color:#cccccc;
}

JavaScript

var news_per_page = 4;
$(".data_cat > *:gt("+(news_per_page-1)+")").hide();

/* make page indicator*/
var total_page = Math.ceil($(".data_cat > *").size()/news_per_page);
$('div.page').empty();
var pagehtml = '<a class="all" id="active">1</a>';
for(var i = 2; i < total_page; i++)
    pagehtml+='<a class="all">'+i+'</a>';
$('div.page').html(pagehtml);

$(function () {
    /*     category switching */
    $('#type').change(function () {
        if ($('#type').val() == 'all') {
            $('.data_cat > *').hide();
            
        } else {
            /*     hide and show contents*/
            $('.data_cat > *').hide();
            var s = '.data-' + $('#type').val();
            $(s + ":lt(" + news_per_page + ")").show();
            
            /*    page bar*/
            var total_page = Math.ceil($(s).size()/news_per_page);
            alert(total_page);
            $('div.page').empty();
            var pagehtml = '<a id="active">1</a>';
            for(var i = 2; i < total_page; i++)
                pagehtml+='<a >'+i+'</a>';
            $('div.page').html(pagehtml);
        }
        $('div.page > a').removeClass().addClass($('#type').val());
    });

    
    
    
    /*    page switching */
    $(document).on("click",".page a",function () {
        $('.data_cat > *').hide();
     
        var type = $(this).attr("class")
        var page = $(this).text();
        var start_e = (page-1)*news_per_page+1;
        var end_e = start_e+news_per_page;     
        
        if (type == 'all') {
            var s = 'div.data_cat ';
            for(var i = start_e; i < end_e; i++){
                $(s+':hidden:nth-child('+i+')').show();  
            }
        } 
        else {
            start_e-=2;
            end_e=news_per_page;
            var s = 'div.data_cat div.data-' + type;
            if(start_e<=0){
                $(s+":lt("+end_e+")").show();  
            }
            else
                $(s+":gt("+start_e+"):lt("+end_e+")").show();  
   ...