How can I make an external button affect only one instance of a class?
<p>I am brand new to this, teaching myself, and could really use some guidance. I have a series of sliders that each have an info button. The info is revealed when the "info button" is pressed, and then hidden again when the "close button" is pressed. The problem is, I currently have to write new code for each slider using different class names (cover1, cover2, cover3, etc), because I don't know how to do this automatically.</p>

<p>Here's what the horrific code is currently doing:</p>

<pre><code>$('.infobtn').click(function(){
    $('.cover', '.boxgrid').stop().animate({top:'0px'},{queue:false,duration:360});
    $(this).hide();
    $('.closebtn').show();
    $(".cover", '.boxgrid').css("pointer-events", "auto");
});
$('.closebtn').click(function(){
    $(".cover", '.boxgrid').stop().animate({top:'455px'},{queue:false,duration:360});
    $(this).hide();
    $('.infobtn').show();
    $(".cover", '.boxgrid').css("pointer-events", "none");
});


$('.infobtn2').click(function(){
    $(".cover2", '.boxgrid').stop().animate({top:'0px'},{queue:false,duration:360});
    $(this).hide();
    $('.closebtn2').show();
    $(".cover2", '.boxgrid').css("pointer-events", "auto");
});
$('.closebtn2').click(function(){
    $(".cover2", '.boxgrid').stop().animate({top:'455px'},{queue:false,duration:360});
    $(this).hide();
    $('.infobtn2').show();
    $(".cover2", '.boxgrid').css("pointer-events", "none");
});
</code></pre>

<p>etc.</p>

<p>Here's the HTML of one of the captions if that will help:</p>

<pre><code>&lt;div class="boxgrid captionfull" style="z-index: 51;"&gt;
    &lt;div id="info" class="cover boxcaption"&gt;
        &lt;div id="infotext"&gt;
            &lt;h3&gt;Sed eu rutrum velit. Nunc leo massa nunc. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nibh
            vitae volutpat euismod, risus leo porta nunc, in hendrerit diam sem
            commodo orci. Cras vitae tincidunt sapien. Integer dolor nisl,
            egestas sit amet mollis a, viverra sed sem. Pellentesque rhoncus
            ursus justo, sit posuere.&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id="btn" class="infobtn"&gt;
    &lt;img src="images/info.png" /&gt;
&lt;/div&gt;

&lt;div id="btn" class="closebtn" style="display: none;"&gt;
    &lt;img src="images/close.png" /&gt;
&lt;/div&gt;
</code></pre>

<p>Thank you so much for helping!</p>
