JSFiddle - React, Tailwind, and code Playground

HTML

<table id="SubstancesWithMissingSwedishSubstanceName" class="controlTable">
    <thead>
        <tr class="rowToClick1">
            <th title="Expandera/Minimera">Substance id:</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowToExpand1">
            <td>data here...</td>
        </tr>
    </tbody>
</table>
<hr />
<table>
    <thead>
        <tr class="rowToClick2">
            <th title="Expandera/Minimera">Substance id:</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rowToExpand2">
            <td>data here...</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
}
.rowToClick1 {
    cursor: pointer;
}
.rowToClick2 {
    cursor: pointer;
}

JavaScript

$('.rowToClick1').click(function () {
        $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-';
        });
        $(".rowToExpand1").toggle();
    });

    $('.rowToClick2').click(function () {
        $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-';
        });
        $(".rowToExpand2").toggle();
    });