button which triggers ajax call, and want to get async attributes

<button
   class="p-4 next-page-loader"
   async-url="myurl"
   async-data="{'username':'QuandaleDingle'}">
    Get Next Page
</button>

my index.js linked with html

function getNextPageFunction(){
    console.log('function started'); //works fine
    print(this.attr('async-url'));
    $.ajax({
        url: this.attr('async-url'),
        data: this.attr('async-data'),
        dataType: "json",
        error: function(rdata){
            console.log(rdata);
        },
        success: function(rdata){
            console.log(rdata);
        },
    })
};
$(document).ready(function(){
    console.log('start async'); //working fine
    console.log($(".next-page-loader").attr('class')); //working fine
    $(".next-page-loader").on("click", getNextPageFunction); //when-clicked-on-button-raises-error
    console.log("end async"); //working fine

})

the error in console

Uncaught TypeError: this.attr is not a function
    at HTMLButtonElement.getNextPageFunction (index.js:9:16)
    at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2:43064)
    at v.handle (jquery-3.6.0.min.js:2:41048)

i also tried passing this as an function input, not working either, raises same problem