I have a website built with Divi, and on one page, I have multiple galleries (with class .pa-gallery-load-more), each displaying 8 photos initially. I’ve added a “load more” button (with id #pa_load_more) that loads more photos when clicked using the following code:

jQuery(document).ready(function(){
    //For mobile Screens
    if (window.matchMedia('(max-width: 767px)').matches) {
        var initial_show_images = 2;
    var images_reveal = 2;
    jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
    jQuery("#pa_load_more").on("click", function(event){
        event.preventDefault();
        initial_show_images = initial_show_images + images_reveal;
        jQuery(".pa-gallery-load-more .et_pb_gallery_item").css("display","block");
        jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_show_images+")" ).css("display","none");
        var images_num = jQuery(".pa-gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
            if(images_num == 0){
            jQuery(this).css("display","none");    
            }
        
    })
    } else {
        //For desktop Screens
        var initial_row_show = 8;
        var row_reveal = 8;
        var total_images = jQuery(".pa-gallery-load-more .et_pb_gallery_item").length;
        jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
        
        jQuery("#pa_load_more").on("click", function(event){
            event.preventDefault();
            initial_row_show = initial_row_show + row_reveal;
            jQuery(".pa-gallery-load-more .et_pb_gallery_item").css("display","block");
            jQuery(".pa-gallery-load-more .et_pb_gallery_item").not( ":nth-child(-n+"+initial_row_show+")" ).css("display","none");
            var images_num = jQuery(".pa-gallery-load-more .et_pb_gallery_item").not('[style*="display: block"]').length
            if(images_num == 0){
            jQuery(this).css("display","none");    
            }  
        })   
    }   
})

The problem is that this code is causing all the galleries on the page to load more photos when any “load more” button is clicked. I need each “load more” button to only load more photos in the specific gallery it belongs to, not all galleries at once.

I solved the issue by adding a snippet of code for each gallery where I change the gallery class (.pa-gallery-load-more_1, .pa-gallery-load-more_2, and so on) and the button ID (#pa_load_more_1, #pa_load_more_2, and so on). However, I was wondering if there is a way to apply a rule within the original code without having to insert multiple snippets.

Thanks