JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<script src="http://junk.hostsaba.com/timetracker/jquery.jeditable.mini.js"></script>
<article>
    <section class="annotation1" data-section="1" id="section_data-section1" typeof="aa:section">
        <div class="wrapper" title="Doubleclick to edit...">
            <h1>Section </h1>
            <p>some content</p>
            <section class="annotation2" data-section="2" id="subsection_data-section2" typeof="aa:section">
                <div class="wrapper" title="Doubleclick to edit...">
                    <h2>Subsection </h2>
                    <p>some more content</p>
                </div>
            </section>
        </div>
    </section>
</article>

JavaScript

$('div.wrapper').dblclick(function(event) {
    event.stopPropagation();
    
    // save a clone of "this", including all events and data
    $(this).data('clone', $(this).clone(true, true))
        .editable('edit/', {
        onreset: function() {
            var $that = this.parent();
            $that.editable('destroy');
            
            // restore the editable element with the clone
            // to retain the events and data
            setTimeout(function() {
                $that.replaceWith($that.data('clone'));
            }, 50);
        }
    }).click();
});