JSFiddle - React, Tailwind, and code Playground

HTML

<div id="create-summary">
    <div class="lv1">
        <div class="book-title">Introduction</div>
    </div>
    <div class="lv1">
        <div class="book-title">1. AAA</div>
    </div>
    <div class="lv1">
        <div class="book-title">2. BBB</div>
    </div>
    <div class="lv1">
        <div class="book-title">3. CCC</div>
        <div class="lv2">3.1 aaa</div>
        <div class="lv2">3.2 bbb</div>
        <div class="lv2">3.3 ccc</div>
        <div class="lv2">3.4 ddd System
            <div class="lv3">3.4.1 xxxxx</div>
            <div class="lv3">3.4.2 yyyyy</div>
            <div class="lv3">3.4.3 zzzzz</div>
        </div>
    </div>
    <div class="lv1">
        <div class="book-title">4. DDD</div>
    </div>
    <div class="lv1">
        <div class="book-title">5. EEE</div>
    </div>
</div>
<button type="button" id="moveUp">Up</button>/
<button type="button" id="moveDown">Down</button>

CSS

.clicked{
    color: red !important;
}
.lv2, .lv3 {
    margin-left:15px;
}

.child{
    color:black;
}

JavaScript

var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");

$itemLv1.click(function (e) {
    $selected = $(this);
    var x = $(this).toggleClass('clicked');
    $("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
    x.siblings().removeClass('clicked');
    e.stopPropagation();
});

$("#moveUp").click(function () {
    $selected.insertBefore($selected.prev("[class^=lv]"));
});

$("#moveDown").click(function () {
    $selected.insertAfter($selected.next("[class^=lv]"));
});