Add ID or similar to class in jquery-function?
<p>I have 20 buttons on same page which opens different images with onClick. Buttons use same styling and are div-class.Each button is made out of 2 absolute positioned buttons which changes position by display none / block when clicked. For this I'm using jQuery.</p>

<p>Problem is that I only want the jQuery-function to work on the button clicked and not the 19 other buttons at the same time. Can name or ID or other solution solve this?</p>

<p>Here's the code:</p>



<pre><code>$(function(){
  $('.zoom_In').click(function(){
    $(".zoom_Out").css({"display":"block"});
  });
});

$(function(){
  $('.zoom_Out').click(function(){
    $(".zoom_Out").css({"display":"none"});
  });
});
</code></pre>



<pre><code>.links {
    float: left;
    width: 88%;
    height: auto;
    margin: 1%;
    padding: 4%;
    border: 2px solid #900;
    background: #FFF;
    cursor: pointer; 
    text-align: left;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #999;
}
#zoomBtn_wrap  {
    position: relative;
    float: right;
    width: 28%;
    height: auto;
    margin: 0 20% 0 0;
    padding: 0;
}
.zoom_In {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #CCC;
    cursor: pointer;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 100%;
}
.zoom_In:hover  {
    border: 2px solid #999;
    background: #FFF;
    color: #000;
}
.zoom_Out {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #CCC;
    cursor: pointer;

    display: none;

    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 100%;
}
.zoom_Out:hover  {
    border: 2px solid #999;
    background: #FFF;
    color: #000;
}
</code></pre>



<pre><code>&lt;div class="links"&gt; 
      &lt;div id="zoomBtn_wrap"&gt;
          &lt;input name="" type="button" id="" class="zoom_In" onClick="" title="" value="Show" /&gt;

           &lt;input name="" type="button" id="" class="zoom_Out" onClick="" title="" value="Hide" /&gt;                
      &lt;/div&gt; &lt;!--End of zoomBtn_wrap--&gt;
&lt;/div&gt;

&lt;div class="links"&gt;                
      &lt;div id="zoomBtn_wrap"&gt;
                &lt;input name="" type="button" id="" class="zoom_In" onClick="" title="" value="Show" /&gt;

                 &lt;input name="" type="button" id="" class="zoom_Out" onClick="" title="" value="Hide" /&gt;                
      &lt;/div&gt; &lt;!--End of zoomBtn_wrap--&gt;
&lt;/div&gt;
</code></pre>
