JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//imperavi.com/js/redactor/redactor.css">
<script src="//imperavi.com/js/redactor/redactor.js"></script>
<div id="toolbar_wrapper">
    <div id="toolbar">
    </div>
</div>

<div id="content">
    <div class="redactor" id="red1">
        <h1>Header</h1>
        <p>Paragraph</p>
    </div>

    <div class="redactor" id="red2">
        <h1>Another Header</h1>
        <p>Another Paragraph</p>
    </div>
</div>

CSS

#content {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid lightgray;
}

.redactor {
    border: 1px solid lightgreen;
    margin: 10px;
}

JavaScript

$(document).ready(function () {

    var current_edit;

    function destroy_redactor(param) {
        console.log("destroy");
        $(param).redactor('core.destroy');
    }

    function initialize_redactor(param) {
        console.log("init");
        $(param).redactor({
            focus: true,
            toolbarExternal: '#toolbar'
        });
    }

    $('.redactor').on("click", function() {
        if (!$(this).hasClass("selected")) {
        $(".redactor").each(function () {
 if($(this).hasClass("selected"))
            {
                destroy_redactor(current_edit);
                $(this).removeClass("selected");
            }
        });

        
            $(this).addClass("selected");
            current_edit = $(this);
            initialize_redactor(current_edit);
        }
    });

});