JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1>
    <tr><td section-opener=mysection1 section-state=open> SOME HEADER </td><td></td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr section-content=mysection1><td><input type=text value="some AAA"></td><td>some zaaother text</td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr><td section-opener=anothersection section-state=open> Hu ? </td><td></td></tr>
<tr section-content=anothersection><td>some text</td><td><input type=text value="some other text"></td></tr>
<tr section-content=anothersection><td>some text</td><td><input type=text value="try editing this text"></td></tr>
</table>

CSS

td[section-opener] {
    font-weight: bold;
    cursor: pointer;
}
td[section-opener][section-state="close"]:before {
    color: #ccc;
    content: " \25B6  ";
}
td[section-opener][section-state="close"]:hover:before{
    color: #aaa;
    content: " \25B6  ";
}
td[section-opener][section-state="open"]:before {
    content: "\25BC  ";
}
tr[section-content][section-state="close"] {
    display: none;
}
tr[section-content][section-state="open"] {
    display: table-row;
}

JavaScript

$('body').on('click', 'td[section-opener]', function() {
        changeState($(this).attr('section-opener'));
    });

changeState = function(sectionId, newstate) {
    var $opener = $('td[section-opener="'+sectionId+'"]');
    console.log($opener);
    var oldstate = $opener.attr('section-state');
    if (oldstate==newstate) return newstate;
    newstate = oldstate=='open' ? 'close' : 'open'; // sanitization
    $opener.attr('section-state', newstate);
    $('tr[section-content="'+sectionId+'"]').attr('section-state', newstate);
    return newstate;
};