JQuery not loading first 3 elements.Instead it is loading all elements in the list

Question

This question is very similar to this question but slightly different from this question in the sense that i am extracting the unordered list from looping through MySQL query results, unlike from a static HTML unordered list, as is the case in this question. I am not sure how significant this difference is from a soft ware engineering perspective....

Indeed, i have tried implementing the solution provided by @Tushar Gupta- "curioustushar" but have encountered one problem.The JQuery is not loading the first three elements. Instead it is loading all elements in my list.Everything else i.e., loading more and showing less elements works fine. I know that this kind of question has been asked many times but i could not find one in the PHP/MysQL context.

This is what i am trying to do

I have a MySQL table with 10 rows and two columns. You can create it like so:

create table myyears(id int(11) not null primary key auto_increment, year varchar(4));

You can add the test/dummy data here:

insert into myyears(year) values(2022);
insert into myyears(year) values(2021);
insert into myyears(year) values(2020);
insert into myyears(year) values(2019);
insert into myyears(year) values(2018);
insert into myyears(year) values(2017);

I am querying this table using PHP and outputting the results as an unordered list. Here is the code:

<ul id="myList">
<?php
$sql = $con->prepare('select * from myyears');
while ($row=$sql->fetch()){
    $year = $row['year'];
    ?>
    <li>
     <?php echo   $year; ?>
     </li>
     <?php
      }
      ?
   </ul>
     <div id="loadMore">Load more</div>
     <div id="showLess">Show less</div>

I am using the same JQuery provided by @Tushar Gupta- "curioustushar" which looks like this:

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

Everything is working except that the JQuery above is loading all elements other than three. What can i possibly be doing wrong?