javascript - Using same click function for multiple elements (Jquery) -

hi im having troubles getting following work. first element works, how should think?

<div class="hi">     <a id="tabbtn" href="javascript:void(0)"></a> </div> <div class="hi">     <a id="tabbtn" href="javascript:void(0)"></a> </div> <div class="hi">     <a id="tabbtn" href="javascript:void(0)"></a> </div>  <script>     $('#tabbtn').on("click",function(){         if ($(this).parent('.hi').css('max-height') == '65px'){             $(this).parent(".hi").addclass('open');         }         else{             $(this).parent(".hi").removeclass('open');         }     }) </script> 

using same id on multiple elements invalid, use class instead:

    $('.tabbtn').on("click", function() {        if ($(this).parent('.job').css('max-height') == '65px') {          $(this).parent(".job").addclass('open');        } else {          $(this).parent(".job").removeclass('open');        }      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <div class="hi">    <a class="tabbtn" href="javascript:void(0)">hello</a>  </div>  <div class="hi">    <a class="tabbtn" href="javascript:void(0)">hello2</a>  </div>  <div class="hi">    <a class="tabbtn" href="javascript:void(0)">hello3</a>  </div>