JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
    
    <div>
        <h3><a href="#">Question 2. My Second Question ?</a></h3>
        <div>
            Second content<br />
        </div>
    </div>
    
    <div>
        <h3><a href="#">Question 3. My Third Question ?</a></h3>
        <div>
            Third content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

JavaScript

$(document).ready(function() {
    $( "> div", "#questionsDispos" ).draggable({
        helper: "clone",
        revert: "invalid",
        cursor: "move",
        handle: "h3",
        connectToSortable: ".questions"
        
    });
    
    $( ".questions" ).accordion({
        header: "> div > h3",
        collapsible: true,
        active: false,
        autoHeight: false,
        autoActivate: true
    });
    
    $( ".questions" ).sortable({
        axis: "y",
        handle: "h3",
        items: "div",
        receive: function(event, ui) {
            $(ui.item).removeClass();
            $(ui.item).removeAttr("style");
            $( ".questions" ).accordion("add", "<div>" + ui.item.hmtl() + "</div>");
        }
    });
    
    $( "#questionsDispos" ).accordion({
        header: "> div > h3",
        collapsible: true,
        active: false,
        autoHeight: false
    });
    $( "button" ).button();
    $('#addAccordion').click( function() {
        var newDiv = "<div><h3>Q4 New Question</h3><div>New Content</div></div>";
        $('.questions').append(newDiv)
        $('.questions').accordion("refresh");        
    });
});