Transforming Code into Ajax Jquery for Pure Javascript

Question

Hello, everybody all right? I’m creating a pagination system. However, the pagination system is the only system of the site that is using Jquery. That is, it is loading an entire library, affecting the site loading time (SEO).

The code in Ajax:

$(document).ready(function(){
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 6;
        row = row + rowperpage;

        if(row <= allcount){
            $("#row").val(row);

            $.ajax({
                url: 'getData.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Carregando...");
                },
                success: function(response){
                    setTimeout(function() {
                        $(".post:last").after(response).show().fadeIn("slow");
                        var rowno = row + rowperpage;
                        if(rowno > allcount){
                            $(".load-more").prop('disabled', true);
                            $('.load-more').css("background","grey");
                        }else{
                            $(".load-more").text("Carregar Mais");
                        }
                    }, 2000);

                }
            });
        } }); });

I tried to recreate the code, but it’s not working. According to the Chrome error identifier, there are no issues in the code. Does anyone have any idea what it is?

Pure JS code recreated (not working):

function myFunction(){
    var row = document.getElementById('row').value;
    var allcount = document.getElementById('all').value;
    var rowperpage = 6;
    row = row + rowperpage;

if(row <= allcount){
    var request = new XMLHttpRequest();
    request.open('POST', 'getData.php', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.onreadystatechange = function() {
        row = document.getElementById('row').value;
        document.getElementsByClassName("post");
        var rowno = row + rowperpage;
        if(rowno > allcount){
            document.getElementById("load-more").disabled = true;
        } else { }
        };
      request.onerror = function() {
      };
    request.send(row);
  }
}

I am very grateful.