JSFiddle - React, Tailwind, and code Playground

HTML

<table border='0'>
  <tr>
    <th>Класс</th>
    <th>код</th>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Мебель</td>
    <td>1</td>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Электроника</td>
    <td>2</td>
  </tr>
  <tr class='header expand'>
    <td><span class='sign'></span> Бытовая химия</td>
    <td>3</td>
  </tr>
</table>

CSS

table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
.header:hover{
  cursor: pointer
}
.header .sign:after{
  content: '-'
}
.header.expand .sign:after{
  content: '+'
}

JavaScript

$('.header').click(function(){
  if($(this).hasClass('expand')){
     $(this).closest('table').find('.header').addClass('expand');
    $(this).closest('table').find('.child').remove();
    $(this).removeClass('expand').after('<div class="child"><p>blahblah</p><p>Привет мир</p></div>');
  } else {
    $(this).addClass('expand').parent().find('.child').remove();
  }
  
    
});