How to make a "load more" button without a plugin?

Question

JavaScript

Plugins do not help, because the case is specific. It is necessary to load records on click (custom) through ajax. When I click, I make a request to the database. Can someone give an example?
There is such an option, but I don’t understand something in it. I want to display the finished div , but when I insert it into the loop, the error in the console is: "Uncaught TypeError: Cannot read property 'offset' of undefined";
ajax:

$('#load_more_posts').on('click', function(e){
        console.log('hi');
        e.preventDefault();
         var $offset = $(this).data('offset');
         console.log('var'+$offset);
        $.ajax({
            method: 'POST',
            url: my_ajax_object.ajax_url,
            type: 'POST',
            data: {
                offset: $offset,
                action: 'load_more_posts'
            },
            success:function(response){
                console.log(response);
                $('#load_more_posts').data('offset', parseInt(response.data.offset));
               

            }
        }); 
    });

php:

add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
function load_more_posts(){
    
 	global $post;
    $rst=[];
    $country_id=get_the_id();
    $query = new WP_Query(array(
            'post_type'     => 'hotel',
            'posts_per_page'=> 2,
            'offset'=> $_POST['offset'],
            'meta_query'     => array(
                array(
                    'key' => 'acf_hotel_country', // name of custom field
                    'value' => $country_id, // matches exactly "123", not just 123. This prevents a match for "1234"
                    'compare' => 'LIKE'
                )
            )
        ));

    if($query->have_posts()):
        while($query->have_posts()):$query->the_post();
             $rst[] = $post;
        endwhile;
        wp_reset_postdata();
        $offset = $_POST['offset']+2;
        
        
    endif;
   wp_send_json_success(array('post'=>$rst, 'offset'=>$offset));
}

this is how it works, but when in the loop after or before $rst[] = $post; add something, then "Uncaught TypeError: Cannot read property 'offset' of undefined"

Answer 1

but when in a loop after or before $rst[] = $post; add something

What exactly are you trying to add?
Maybe it will be better and easier to write new code than to edit this one?
What is so specific that ajax-load-more or infinite-scroll.js cannot be screwed on?

Answer 2

Hello!
1) What is the specific case if this plugin does not help)) - https://ru.wordpress.org/plugins/ajax-load-more/
2) It also says that offset is undefined.

data: {
                offset: $offset,
                action: 'load_more_posts'
            },

You have specified $offset variation and where is the value of this variation? Or try to remove it completely offset: $offset,