Need help modifying a Jquery script

[Belrick]

Using PHP im building a bunch of elements from directory structures.

HTML

<div class="gal">
    <div class="counter"></div>
    <div class="left_arrow"></div><div class="right_arrow"></div>
    <div class="slider">
        <div class="pdf">1</div>
        <div class="pdf">2</div>
        <div class="pdf">3</div>
        <div class="pdf">4</div>
        <div class="pdf">5</div>
        <div class="pdf">6</div>
        <div class="pdf">7</div>
        <div class="pdf">8</div>
    </div>
</div>

Jquery

$(function() {
   var c = 1, 
       boxw = $('.pdf').outerWidth(true),
       boxn = $('.pdf').length;
    
    $('.slider').width(boxw*boxn);
    
    //////////////////////////////////    
    function b(){
       cc = (c === 1) ? $('.left_arrow').hide() : $('.left_arrow').show();
       ccc =(c >= boxn) ? $('.right_arrow').hide() : $('.right_arrow').show();    
    }
    b();  
    /////////////////////////////////
    
    function a(cb){ 
       $('.slider').animate({left: '-'+ (boxw)*(c-1) },800, cb);

    }
    /////////////////////////////////////////////////////////////////
        function counter(){
        $('.counter').html(c+'/'+boxn);
        }    
        counter();
    /////////////////////////////////////////////////////////////////
        $('.right_arrow').click(function() {
           c++;
           b();
           a();
           counter();
        });
        $('.left_arrow').click(function() {
           c--;
           b();
           a();
            counter();
        });


});

The code works as needed for one directory, the issue is that I need to modify the code to allow for multiple of the HTML .gal elements to be added.
At the moment of course clicking one right arrow moves all the sliders and the counters displays the total number of .pdf elements.

Can anyone please help?