Use same jQuery function in multiple instances

Question

I have this function and it needs to work in 54 different buttons on a page, what am I missing to make it work ONLY in the corresponding FLIP?

$(document).ready(function() {
  $(".flip").mouseenter(function() {
    $(".panel").slideDown("medium");
  });
});
$(document).ready(function() {
  $(".main").mouseleave(function() {
    $(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Answer 1

You could use $(this) object and siblings() method like :

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });

  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

NOTE : No need for two ready function just one is enough.

Hope this helps.

Snippet using mouseenter/mouseleave :

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });
  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Snippet using hover :

$(document).ready(function(){
  $( ".flip" ).hover(function() {
      $(this).siblings(".panel").slideDown("medium");
  }, function() {
      $(this).siblings(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>