how target a specific custom html tag with jQuerry script : i have trouble, i am trying to use a Jquerry script to hide something and make apear a form in a table. 

      <script>
          $(document).ready(function(){
              $(".hide").click(function(){
                  $("p").hide(100);
                  $("z").show(100);
              });
              $(".show").click(function(){
                  $("p").show(100);
                  $("z").hide(100);
              });
          });
      </script>
but right now i hide or make apear everything on my custome  tag. how could i make this script to only target an ID that i could give to those tag.

    <table class="table table-bordered">
      <th>début vacance</th>
      <th>fin vacance</th>
      <th>supprimer vacances</th>
      <tr th:each="vacations : ${selectedUser.getVacations()}">
        <td th:utext="${vacations.getStartVacation()} ">...</td>
        <td th:utext="${vacations.getEndVacation()} + ${vacations.id}">...</td>
           <td>
        <p th:text="${vacation.fistname}">...</p>
        <z th:text="${vacations.id}">...</z>
        <button class="hide">Hide</button>
        <button class="show">Show</button>
    </td>
    </tables>