Fusionner des cellules de tableau HTML voisines ayant la même valeur à l'aide de JS

Question

Je me débats avec ça depuis un moment. J'ai un tableau qui est généré automatiquement sur la base de certaines données JSON, qui peuvent varier. J'aimerais fusionner les cellules voisines de la première colonne qui ont la même valeur, par exemple "poisson" et "oiseau" dans ce tableau :

<table>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>cod</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>plaice</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>crow</td>
  </tr>
</table>

Idéalement, je ne veux pas utiliser de bibliothèques, juste du JS pur.

Voilà à quoi je voudrais que ça ressemble :

table, tr, td {
  border: solid 1px black;
}

<table>
  <tr>
    <td rowspan="3">fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>cod</td>
  </tr>
  <tr>
    <td>plaice</td>
  </tr>
  <tr>
    <td rowspan="2">bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>crow</td>
  </tr>
</table>

J'ai trouvé différentes façons d'identifier les différentes valeurs et leur fréquence, puis de modifier l'espacement des lignes pour obtenir le bon nombre de cellules et ensuite de supprimer les autres cellules, mais toutes ces méthodes ont échoué dans des cas d'utilisation différents.

C'est ce que j'ai jusqu'à présent :

let table = document.querySelector('table');
let rowCount = 1;

for (let i = 0; i < (table.rows.length - 1); i++) {
  if (table.rows[i].cells[0].innerHTML === table.rows[i + 1].cells[0].innerHTML) {
    rowCount++;
  } else if (rowCount !== 1) {
    table.rows[i].cells[0].setAttribute('rowspan', rowCount);
    for (let j = (i - rowCount + 1); j < rowCount; j++) {
      table.rows[j].cells[0].remove();
    };
    rowCount = 1;
  };
};

table, tr, td {
  border: solid 1px black;
}

<table>
  <tr>
    <td>fish</td>
    <td>salmon</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>cod</td>
  </tr>
  <tr>
    <td>fish</td>
    <td>plaice</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>robin</td>
  </tr>
  <tr>
    <td>bird</td>
    <td>crow</td>
  </tr>
</table>

Ce n'est pas du tout ce que je veux, mais je sens que je suis très proche ! Il essaie de compter le nombre de cellules (de la première colonne) pour lesquelles celle d'en dessous a la même valeur, en assignant ce nombre à la largeur de ligne de la dernière cellule concernée, puis en supprimant les cellules suivantes avant de revenir en boucle pour attraper le reste d'entre elles. J'aimerais que mon code final soit une variation de celui-ci, alors quelqu'un peut-il me montrer où je me trompe ? Merci beaucoup !