Des boutons pour agir sur la bonne cible

Bonjour à tous,

Je n'ai pas trouvé le forum pour le css, mais comme je suis pas sûr que ma question ne concerne pas un peu
JavaScript, je me permets de la poster ici...

J'ai une table alimentée par une bdd dont certains tr/td/div contiennent le détail d'une prestation que l'utilisateur peut afficher à sa convenance en cliquant sur un bouton. Le code que j'ai trouvé sur Internet et adapté à mon cas fonctionne bien pour le premier enregistrement de la bdd, mais le bouton des suivants ouvre systématiquement le premier tr !!!

Voici ce que j'ai écrit, tout d'abord la table :

<tbody>
   <?php
      $i=0;
      while ($data_prestations=$req_prestations->fetch()) {?>
   <tr class="tractive <?php echo (++$i%2==0 ? "trclair" : "trsombre")?>">
      <td class="tdactive" data-label="TYPE">
         <div>
            <?php 
               echo $data_prestations['designation'];
               if($data_prestations['descriptif']<>NULL){
                   //echo '<button class="bouton" type="button" >Détail</button>';
                   echo '<button class="bouton" type="button"><img src="img/dw.png"/></button>';
               }
               ?>
         </div>
      </td>
      <td data-label="QTÉS" class="td-droite td-prestations tdactive">
         <div>
            <?php
               $quantites = $data_prestations['quantites'];
               echo number_format($quantites, 2, ",", ".") . '  ';
               ?>
         </div>
      </td>
      <td data-label="PRIX" class="td-droite td-prix tdactive">
         <div>
            <?php
               $prix = $data_prestations['prix'];
               echo number_format($prix, 2, ",", ".") . ' €';
               $total = $quantites*$prix;
               $total_g=$total_g+$total;
               ?>
         </div>
      </td>
      <td data-label="TOTAL" class="td-droite total td-prix tdactive">
         <div>
            <?php
               echo number_format($total, 2, ",", ".") . ' €';
               ?>
         </div>
      </td>
   </tr>
   <?php
      if($data_prestations['descriptif']<>NULL){?>
   <tr class="<?php echo ($i%2==0 ? "trclair" : "trsombre");?>">
      <td class="tdactive" data-label="DÉTAIL" colspan="4">
         <div class="divactive">
            <?php echo $data_prestations['descriptif'];?>
         </div>
      </td>
   </tr>
   <?php
      }
      }?>
</tbody>

puis le css qui assure l'apparition en douceur de la div :

.divactive {
    overflow: auto;
}


tr.trcible td div{
    display: none;
}

tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}
tr.tractive td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
}

.bouton {
  float: right;
  background-color: transparent;
}

Et enfin le JavaScript :

<script src="../js/jquery.min.js"></script>
$('button').on('click', function(){
    $('tr:nth-child(2)').toggleClass('tractive');
});

Merci d'avance à celui ou ceux qui auront une idée sur l'origine de mon problème !