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

HTML

HTML Code:
<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
Code:
$(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?