[jQuery] Iterate through multiple slideshows on one page

[ldurand23]

I currently have code that can iterate through a group of div's to act
as a slideshow. What I am trying to do is have multiple groups of
div's with the same class be on the same page and have each slideshow
act independently of the other. Can someone please take a look at this
code and provide any suggestions for making that happen.

Thank you!

jquery code:
$(document).ready(function(){

       //these scripts handle the rotating tip box
        var total = $('div.slideshow-item').length;

        $('div.caption').html('1 of ' + total );

        $('a.slideshow-prev').click(function(){
            var curr  = $('div#slideshow-slide').attr('_number');
            var prev  = parseInt(curr) - 1;
            if (prev < 0) prev = total - 1;
            var img   = $('div.slideshow div.slideshow-item:eq(' +
prev + ')').html();
            $('div#slideshow-slide').fadeOut('fast', function(){
               $(this).html( img ).attr('_number',
prev).fadeIn('fast');
               $('div.caption').html( (parseInt(prev) + 1) + ' of ' +
total )
              //$('div#slideshow-caption').html( img.attr('alt') );
            });
            return false;
        });

        $('a.slideshow-next').click(function(){
            var curr  = $('div#slideshow-slide').attr('_number');
            var next  = parseInt(curr) + 1;
            if (next > (total - 1)) next = 0;
            var img   = $('div.slideshow div.slideshow-item:eq(' +
next + ')').html();
            //var cap   = $('div.slideshow div.slideshow-item-
caption:eq(' + next + ')').html();
            $('div#slideshow-slide').fadeOut('fast', function(){
               $(this).html( img ).attr('_number',
next).fadeIn('fast');
               $('div.caption').html( (parseInt(next) + 1) + ' of ' +
total )
               //$('div#slideshow-caption').html( img.attr('alt') )
            });
            return false;
        });
});

html code:

<div class="tip-box">
        <div class="navigation">
            <a href="#" class="slideshow-prev"><img src="http://
www.taunton.com/finegardening/images/slideshow_previous.gif"
alt="Previous" border="0" /></a> &nbsp; <div class="caption"></
div>&nbsp;
            <a href="#" class="slideshow-next"><img src="http://
www.taunton.com/finegardening/images/slideshow_next.gif" alt="Next"
border="0" /></a>
        </div>

        <div class="tip-text" id="slideshow-slide" _number="0">
            <img src="http://www.taunton.com/CMS/uploadedImages/Images/
Gardening/Issues_81-90/041082062-02_lg.jpg" alt="" />
            <span class="caption">1. Dig a level base, then add well-
tamped crushed gravel. The depth of the base depends on the climate.
<span class="photo-credit">Photo/Illustration: Allan Mandell</span></
span>
        </div>

        <div class="slideshow">
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082062-02_lg.jpg" alt="" />
                <span class="caption">1. Dig a level base, then add
well-tamped crushed gravel. The depth of the base depends on the
climate.</span>
            </div>
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082063-01_lg.jpg" alt="" />
                <span class="caption">2. Wet the rocks to accentuate
their color distinctions.</span>
            </div>
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082063-02_lg.jpg" alt="" />
                <span class="caption">3. Choose smooth rocks with a
flat side.</span>
            </div>
        </div>
    </div>

<div class="tip-box">
        <div class="navigation">
            <a href="#" class="slideshow-prev"><img src="http://
www.taunton.com/finegardening/images/slideshow_previous.gif"
alt="Previous" border="0" /></a> &nbsp; <div class="caption"></
div>&nbsp;
            <a href="#" class="slideshow-next"><img src="http://
www.taunton.com/finegardening/images/slideshow_next.gif" alt="Next"
border="0" /></a>
        </div>

        <div class="tip-text" id="slideshow-slide" _number="0">
            <img src="http://www.taunton.com/CMS/uploadedImages/Images/
Gardening/Issues_81-90/041082062-02_lg.jpg" alt="" />
            <span class="caption">1.</span>
        </div>

        <div class="slideshow">
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082062-02_lg.jpg" alt="" />
                <span class="caption">1.</span>
            </div>
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082063-01_lg.jpg" alt="" />
                <span class="caption">2.</span>
            </div>
            <div class="slideshow-item" style="display:none">
                <img src="http://www.taunton.com/CMS/uploadedImages/
Images/Gardening/Issues_81-90/041082063-02_lg.jpg" alt="" />
                <span class="caption">3.</span>
            </div>
        </div>
    </div>