hover - jQuery - How to apply addClass to only current instance? -

this question has answer here:

• how target current hovering div jquery when there many other divs same class? 1 answer

i have code appearing hundreds of times on page:

<div class="container"> <div class="containerbutton"></div> <div class="containercontent">content</div> </div>  <div class="container"> <div class="containerbutton"></div> <div class="containercontent">content</div> </div>  <div class="container"> <div class="containerbutton"></div> <div class="containercontent">content</div> </div> 

i'm trying achieve this: whenever "containerbutton" hovered, want "containercontent" div under display , have "displayclass" class applied it. right now, anytime hover on "containerbutton" div, "containercontent" divs on page display. how can target hovered button?

here script i'm working with:

<script> jquery(document).ready(function() {  $(".container .containerbutton").hover(function () {     $(".containercontent").addclass('displayclass');     }, function(){     $(".containercontent").removeclass('displayclass'); });  }); </script> 

you have use this reference current hovered element

jquery(document).ready(function() {    $(".container .containerbutton").hover(function () {      $(this).next().addclass('displayclass');      }, function(){      $(this).next().removeclass('displayclass');  });    });

.displayclass{    display : none;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="container">  <div class="containerbutton">1</div>  <div class="containercontent">content</div>  </div>    <div class="container">  <div class="containerbutton">2</div>  <div class="containercontent">content</div>  </div>    <div class="container">  <div class="containerbutton">3</div>  <div class="containercontent">content</div>  </div>