How to make the slider scroll its object and not everything on the page?

Question

Slider

(function ($) {
    $.fn.slide = function () {
        var imgWidth = $(this).children().children().width();
        var imgInBlock = Math.ceil(($(this).width() / imgWidth) + 1); //
        var lengthSlide = 1;
        console.log(this[0].children);
        var curWidth = 0; //
        var totalImage = $('.slidewrapper').children().length; //
        var curImg = 0;

        $('.next-btn').click(function () {
            if (curImg <= totalImage - (imgInBlock)) {
                curWidth -= imgWidth * lengthSlide;
                $('.slidewrapper').css('transform', 'translate' + '(' + curWidth + 'px)');
                curImg++;
            }
        })

        $('.prev-btn').click(function () {
            if (curImg > 0) {
                curWidth += imgWidth * lengthSlide;
                $('.slidewrapper').css('transform', 'translate' + '(' + curWidth + 'px)');
                curImg--;
            }
        })


    };
})(jQuery);

A photo

spoiler

As you can see, there are two blocks with an image slide on the page, and now the script scrolls through all these blocks, but you need to make it scroll only its own block. The class names are the same, how to do it? through selectors? if so, how, I tried it through this, it doesn't work