помогите разобраться с пагинацией

ковыряю браузерную игру, не могу довести до ума пагинацию на странице. Впринципе все работает, но коряво. Смысл в том, что после регистрации, пользователю предлагается выбрать персонажа. Я добавил по 22 персонажа женского и мужского пола. Чтобы не листать страницу вниз, решил добавить пагинацию (выводится по 4 персонажа на страницу). Проблема в том, что если выбирать между мужскими персонажами все работает, но если прерключиться на вкладку женских персонажей, то при переключении страниц перебрасывает на вкладку с мужскими персонажами.

    <div class="card">
                
                <div class="card-body">
                    <center><h4><i class="far fa-hand-pointer"></i> Choose your character</h4></center><br />
               
                    <ul class="nav nav-tabs nav-justified">
    <?php
    $first   = true;
    $querycc = mysqli_query($mysqli, "SELECT * FROM `character_categories`");
    while ($rowcc = mysqli_fetch_assoc($querycc)) {
    ?>
                        <li class="nav-item <?php
        if ($first) {
            echo 'active';
        }
    ?>"><a data-bs-toggle="tab" class="nav-link <?php
        if ($first) {
            echo 'active';
            $first = false;
        }
    ?>" href="#id<?php
        echo $rowcc['id'];
    ?>"><i class="fa-solid <?php
        echo $rowcc['fa_icon'];
    ?>"></i> <?php
        echo $rowcc['category'];
    ?></a></li>
    <?php
    }
    ?>
                    </ul>
    
                    <form role="form" action="" method="post">
                        <div class="tab-content">
    <?php
    $firsta   = true;
    $queryccs = mysqli_query($mysqli, "SELECT * FROM `character_categories`");
    while ($rowccs = mysqli_fetch_assoc($queryccs)) {
        $category_id = $rowccs['id'];
    ?>
                            <div id="id<?php
        echo $category_id;
    ?>" class="tab-pane fade <?php
        if ($firsta) {
            echo 'show active';
            $firsta = false;
        }
    ?>">
                                <div class="row">
    <?php
    if (isset($_GET['page_no']) && $_GET['page_no']!="") {
        $page_no = $_GET['page_no'];
        } else {
            $page_no = 1;
            }
     
        $total_records_per_page = 4;
        $offset = ($page_no-1) * $total_records_per_page;
        $previous_page = $page_no - 1;
        $next_page = $page_no + 1;
        $adjacents = "2";
        
        $result_count = mysqli_query($mysqli, "SELECT COUNT(*) As total_records FROM `characters` WHERE category_id = '$category_id' ");
        $total_records = mysqli_fetch_assoc($result_count);
        $total_records = $total_records['total_records'];
        $total_no_of_pages = ceil($total_records / $total_records_per_page);
        $second_last = $total_no_of_pages - 1; // total page minus 1
        
        
            
        $queryc = mysqli_query($mysqli, "SELECT * FROM `characters` WHERE category_id = '$category_id' LIMIT $offset, $total_records_per_page");
        while ($rowc = mysqli_fetch_assoc($queryc)) {
    ?>
                                    <div class="col-md-3">
                                        <center>
                                            <h4><br /><span class="badge bg-named"><?php
            echo $rowc['name'];
    ?></span></h4>
                                        <p><?php
            echo $rowc['description'];
    ?></p>
                                        </center>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="character" value="<?php
            echo $rowc['id'];
    ?>" required />
                                            <img src="<?php
            echo $rowc['image'];
    ?>" width="80%" />
                                        </span><hr />
                                        <center>
    
        
        <div style ="font-size:14px;"><i class="fa-solid fa-hand-fist"></i> Strength bonus</div>
        <div class="progress1 mb-3">
            <div class="progress-bar progress-bar-striped bg-danger" style="width: <?php
        echo percent($rowc['power'], 20);
    ?>%;">
                
                                </div>
                            </div>
                
        <div style ="font-size:14px;"><i class="fa-solid fa-arrows-spin"></i> Agility bonus</div>
        <div class="progress1 mb-3">
            <div class="progress-bar progress-bar-striped bg-success" style="width: <?php
        echo percent($rowc['agility'], 20);
    ?>%;">
                
                                </div>
                            </div>
    <div style ="font-size:14px;"><i class="fa-solid fa-shield-halved"></i> Endurance bonus</div>
        <div class="progress1 mb-3">
            <div class="progress-bar progress-bar-striped bg-info" style="width: <?php
        echo percent($rowc['endurance'], 20);
    ?>%;">
                
                                </div>
                            </div>
    <div style ="font-size:14px;"><i class="fa-solid fa-brain"></i> Intelligence bonus</div>
        <div class="progress1 mb-3">
            <div class="progress-bar progress-bar-striped bg-warning" style="width: <?php
        echo percent($rowc['intelligence'], 20);
    ?>%;">
                
                                </div>
                            </div>
                                        </center>
                                    </div>
    <?php
    mysqli_close($con);
        }
    ?>
                                </div>
                                
                            </div>
    <?php
    }
    ?>
                        </div>
    <ul class="pagination" style="justify-content: center;">
        
        <li <?php if($page_no <= 1){ echo "class='disabled'"; } ?>>
        <a <?php if($page_no > 1){ echo "href='?page_no=$previous_page'"; } ?>><i class="fa fa-angle-left"></i> </a>
        </li>
           
        <?php 
        if ($total_no_of_pages <= 10){       
            for ($counter = 1; $counter <= $total_no_of_pages; $counter++){
                if ($counter == $page_no) {
               echo "<li class='active'><a>$counter</a></li>";  
                    }else{
               echo "<li><a href='?page_no=$counter'>$counter</a></li>";
                    }
            }
        }
        elseif($total_no_of_pages > 10){
            
        if($page_no <= 4) {         
         for ($counter = 1; $counter < 8; $counter++){       
                if ($counter == $page_no) {
               echo "<li class='active'><a>$counter</a></li>";  
                    }else{
               echo "<li><a href='?page_no=$counter'>$counter</a></li>";
                    }
            }
            echo "<li><a>...</a></li>";
            echo "<li><a href='?page_no=$second_last'>$second_last</a></li>";
            echo "<li><a href='?page_no=$total_no_of_pages'>$total_no_of_pages</a></li>";
            }
     
         elseif($page_no > 4 && $page_no < $total_no_of_pages - 4) {         
            echo "<li><a href='?page_no=1'>1</a></li>";
            echo "<li><a href='?page_no=2'>2</a></li>";
            echo "<li><a>...</a></li>";
            for ($counter = $page_no - $adjacents; $counter <= $page_no + $adjacents; $counter++) {         
               if ($counter == $page_no) {
               echo "<li class='active'><a>$counter</a></li>";  
                    }else{
               echo "<li><a href='?page_no=$counter'>$counter</a></li>";
                    }                  
           }
           echo "<li><a>...</a></li>";
           echo "<li><a href='?page_no=$second_last'>$second_last</a></li>";
           echo "<li><a href='?page_no=$total_no_of_pages'>$total_no_of_pages</a></li>";      
                }
            
            else {
            echo "<li><a href='?page_no=1'>1</a></li>";
            echo "<li><a href='?page_no=2'>2</a></li>";
            echo "<li><a>...</a></li>";
     
            for ($counter = $total_no_of_pages - 6; $counter <= $total_no_of_pages; $counter++) {
              if ($counter == $page_no) {
               echo "<li class='active'><a>$counter</a></li>";  
                    }else{
               echo "<li><a href='?page_no=$counter'>$counter</a></li>";
                    }                   
                    }
                }
        }
    ?>
        
        <li <?php if($page_no >= $total_no_of_pages){ echo "class='disabled'"; } ?>>
        <a <?php if($page_no < $total_no_of_pages) { echo "href='?page_no=$next_page'"; } ?>> <i class="fa fa-angle-right"></i></a>
        </li>
        <?php if($page_no < $total_no_of_pages){
            echo "<li><a href='?page_no=$total_no_of_pages'> Last</a></li>";
            } ?>
    </ul>
                        <input type="submit" name="start" value="Start The Game" class="btn btn-success btn-lg col-12">
                    </form>
    
                </div>
            </div>