JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <fieldset class="majorpoints">
        <legend class="majorpointslegend">[+]</legend>
        <div class="hiders" style="display:none">
            <ul>
                <li>AAA</li>
            </ul>
        </div>
        <fieldset class="majorpoints">
            <legend class="majorpointslegend">[+]</legend>
            <div class="hiders" style="display:none">
                <ul>
                    <li>BBB</li>
                </ul>
            </div>
        </fieldset>
    </fieldset>
</div>
<div>
    <fieldset class="majorpoints">
        <legend class="majorpointslegend">[+]</legend>
        <div class="hiders" style="display:none">
            <ul>
                <li>BBB</li>
            </ul>
        </div>
    </fieldset>
</div>

JavaScript

$('.majorpointslegend').click(function () {
    $(this).next('.hiders').toggle();
    var legend = $(this).closest('fieldset').children('legend:first');
    var value = legend.text();
    if (value.indexOf('[+]') >= 0) value = value.replace('[+]', '') + ' [-]';
    else value = value.replace('[-]', '') + ' [+]';
    legend.html(value);
});