JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<div id="accordion">
    <h3><a href="#">Heading</a></h3>
    <div>
        
        <p>
            Stuff
        </p>
    </div>
    <h3><a href="#">Heading 2</a></h3>
    <div>
        <p>
            Stuff 2
        </p>
    </div>
</div>

<p><button type="button">Append new div</button>

JavaScript

$(function(){
    $("#accordion").accordion({
        event: "click hoverintent"        
    });
    
    $("button").click(function(){
        $("#accordion").accordion("destroy");
        var $template = $("<h3><a href='#'>Appended Heading</a></h3>"
                         +"<div><p>Appended stuff</p></div>");
        $("#accordion").append($template);
        
        $("#accordion").accordion({
            event: "click hoverintent"        
        });
    });
});

$('button').button();