
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
	$('.carregar_mais').click(function(){
        const target = $('.carregar_mais').data('alvo');
		var button = $(this),
		    data = {
			'action': 'loadmore',
			'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
			'page' : misha_loadmore_params.current_page,
			'first_page' : misha_loadmore_params.first_page, // here is the new parameter	
			'first_page_num' : misha_loadmore_params.first_page_num,		 
		};
		$.ajax({ // you can also use $.post here
			url : misha_loadmore_params.ajaxurl, // AJAX handler
			data : data,
			type : 'POST',
			beforeSend : function ( xhr ) {
				$(target).append("<div class='carregando'></div>")
				button.html('carregando...'); // change the button text, you can also add a preloader image
			},
			success : function( data ){
				if( data ) { 
					button.html( '<i class="bi bi-caret-down-fill"></i> Carregar mais posts' );
					$("#carregando").remove();
					$(target).append(data);
					$data.fadeIn(550);
					misha_loadmore_params.current_page++;
 
					if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
						button.remove();
				} else {
					button.remove(); // if no data, remove the button as well
				}
			}
		});
	}
	);
});
