jQuery单击功能只显示页面上的第一个值

I have a problem with my jQuery code, I use "show" and "hide" buttons to display/hide the class, but jQuery only works with my first class. My code is:

$(document).ready(function(){
  $("#hide").click(function(){
    $(".menu_sub_index").hide(500);
  });
  $("#show").click(function(){
    $(".menu_sub_index").show(500);
  });
});

<div class="danhmuc">
  <button id="hide">&#9940;</button>
  <button id="show">Category</button>
</div>

Any suggestions to improve my code? Thanks!

Assuming your html element to be as given below.

<div class="menu_sub_index">Div Content</div>

<div class="danhmuc">
  <button id="hide">&#9940;</button>
  <button id="show">Category</button>
</div>

Click function

$(document).ready(function(){
    $("#hide").click(function(){
        $(".menu_sub_index").hide();
    });
    $("#show").click(function(){
        $(".menu_sub_index").show();
    });
});

Try this

 $(document).ready(function(){
   $("#hide").on("click", function(e){
    $(".menu_sub_index").hide();
   });

   $("#show").on("click", function(e){
    $(".menu_sub_index").show();
    });
});
<div class="danhmuc">
 <button id="hide">&#9940;</button>
 <button id="show">Category</button>
 </div>