Problem with ajax pagination, what could be wrong?

Question

JavaScript

Ajax pagination, there are a row of page number buttons at the top, then next to it are 2 "radio" sorting inputs in forward or reverse order, comments are displayed next, and then pagination is repeated (a row of page number buttons, then next to 2 "radio" inputs).
So much bullshit because of the fact that when a person clicks on a page number at the top, it stands out from the bottom; + also with radio buttons. I know that horror, nightmare, and even the global variable iD......................
But how more rational?

Problem : when you click on the last page number in pagination 2, it throws the page down; with what it is connected mind I will not apply.

<script type="text/javascript">
 $(document).ready(function(){
 iD = 1; // global var
  
 
  function CL(){
       // для сортировки
      if($('#radio1').attr('checked') || $('#radio3').attr('checked')) var S = 1;
      if($('#radio2').attr('checked') || $('#radio4').attr('checked')) var S = 2;
       //

    $("#paging_button li").css({'background-color' : ''}); 
    

     if(this.id)  iD = this.id;
    
var O = document.getElementById(iD);
$(O).css({'background-color' : '#006699'});
var cla = $(O).attr('class');
     $("."+cla).css({'background-color' : '#006699'}); // изменение цвета 
    
      $("#content").load("pag/data.php?page=" + iD + "&s="+ S +"&id=<?php echo $id;?>"); // загрузка контента

    return false;
  }
  
  $(".pag1").css({'background-color' : '#006699'}); // при загрузке документа номер первой страницы сразу выделяется
 
  $("#content").load("pag/data.php?page=1&id=<?php echo $id;?>"); // загрузка комментариев
  $("#paging_button li").on("click",CL);
  
// для сортировки 
   $("#radio2").click( function() {
            if($('.radio2').attr('checked')){
                $('.radio4').attr('checked', true);
              CL();
             
            } 
       });
     $("#radio1").click( function() {
            if($('.radio1').attr('checked')){
                $('.radio3').attr('checked', true);
              CL();
            } 
       });
     $("#radio3").click( function() {
            if($('.radio3').attr('checked')){
                $('.radio1').attr('checked', true);
              CL();
            } 
       });       
     $("#radio4").click( function() {
            if($('.radio4').attr('checked')){
                $('.radio2').attr('checked', true);
              CL();
            } 
       });       
});
// для сортировки 
</script>
    
  
    <!-- Пагинация 1 -->
    <?php if($pages > 1){ ?> <div id="paging_button">
    <ul id="pagList1">
    <?php

    for($i=1; $i<=$pages; $i++)
    {
      echo '<li id="'.$i.'" class="pag'.$i.'">'.$i.'</li>';
    }?>
    </ul>
        <span class="tooltip-1" data-title="Выводить комментарии в прямом порядке" id="toltip-1">
<input type="radio" id="radio1" name="sort" class="checkbox-sort radio1" checked><label for="radio1"><i class="fa fa-sort-numeric-asc"></i></label></span>
        <span class="tooltip-1" data-title="Выводить комментарии в обратном порядке" id="toltip-2">
<input type="radio" id="radio2" name="sort" class="checkbox-sort radio2"><label for="radio2"><i class="fa fa-sort-numeric-desc"></i></label></span>
   <?php } ?>
      <!-- Пагинация 1 -->
   
<-- Контент -->
<div>
  <div id="container">    <div id="content">
    &nbsp;
    </div>
   </div>
 </div>
 <-- Контент -->

       <!-- Пагинация 2 -->
    <?php if($pages > 1){ ?>
    <ul id="pagList2">
    <?php
   
    for($i=1; $i<=$pages; $i++)
    {
      echo '<li id="'.$i.'" class="pag'.$i.'">'.$i.'</li>';
    }?>
    </ul>
      <span class="tooltip-1" data-title="Выводить комментарии в прямом порядке" id="toltip-1">
<input type="radio" id="radio3" name="sort2" class="checkbox-sort radio3" checked><label for="radio3"><i class="fa fa-sort-numeric-asc"></i></label></span>
      <span class="tooltip-1" data-title="Выводить комментарии в обратном порядке" id="toltip-2">
<input type="radio" id="radio4" name="sort2" class="checkbox-sort radio4"><label for="radio4"><i class="fa fa-sort-numeric-desc"></i></label></span>      
      
           
  </div>
  <!-- Пагинация 2 -->
<?php  } ?>

Tell me what can be done simpler and "humanly" and why it does not work as it should.