JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

<button id="add">
 Add tab
</button>

JavaScript

$(function() {
        var icons = {
            header: "ui-icon-circle-arrow-e",
            headerSelected: "ui-icon-circle-arrow-s"
        };
        $( "#accordion" ).accordion({
            icons: icons,
            collapsible: true
        });
        $( "#header1" ).click(function(e) { return false;
            $( "#accordion" ).accordion( "option", "icons", false );
        });
});

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });
    
    $('#add').click(function() {
       var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div>Bonjour Stackoverflow</div>";
       $('#accordion').append($tab);
       
    });