JSFiddle - React, Tailwind, and code Playground

HTML

<table width="200" border="1">
  <tr>
    <td rowspan="6">Summary </td>
    <td colspan="3">
      <div align="center">1 st level</div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P1"><span>-</span>Parameter 1</div>
    </td>
  </tr>
  <tr>
    <td id="problematicRowspan" rowspan="3">L1</td>
    <td colspan="2"><div class="Sub-parameter-1"><span>-</span>Sub parameter (1)</div></td>
  </tr>
  <tr>
    <td>L2</td>
    <td>description</td>
  </tr>
  <tr>
    <td colspan="2"><div class="Sub-parameter-2"><span>-</span>Sub parameter (2)</td>
  </tr>
  <tr>
    <td colspan="3">
      <div class="P2">Parameter 2</div>
    </td>
  </tr>
</table>

JavaScript

$('.P1').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.P2)').slideToggle(100, function() {});
});

$('.Sub-parameter-1').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).closest('tr').nextUntil('tr:has(.Sub-parameter-2)').slideToggle(100, function() {});
  var rows = $('#problematicRowspan').attr('rowspan');
  if(rows == 3) {
     rows--;
  }
  else {
  	rows++;
  }
  $('#problematicRowspan').attr('rowspan', rows);
});