JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" language="javascript" src="styles/theme/js/blocks.js"></script>
<a href="?id=add_block"><button>Добавить блок</button></a>
<div class="block" id="0" name="0">
    <div class="block_header">
        <div class="block_name">Main</div>
        <div class="block_acts">
            <button class="reduct">Редактировать</button><br />
            <button class="remove">Удалить</button>
        </div>
    </div>
    <div class="block_text"></div>
</div>

CSS

div.block_header {
    border: 1px solid orange;
    border-radius: 10px;
    background-color: navajowhite;
    padding: 10px 0 15px 10px;
    height: 50px;
}

div.block_name {
    font-size: 25px;
    font-style: italic;
    color: gray;
    width: 80%;
    float: left;
}

div.block_name:hover {
    color: black;
    cursor: pointer;
    float: left;
}

div.block_acts {
    float: right;
    text-align: center;
    width: 20%;
}

button, input[type="submit"] {
    background-color: midnightblue;
    border: none;
    color: white;
    display: inline;
    width: 150px;
    font-size: 13px;
    height: 20px;
    margin: 1px;
}

button:hover, input[type="submit"]:hover {
    background-color: black;
    cursor: pointer;
}

div.block_text {
    text-align: justify;
    padding: 5px;
    width: 95%;
    border: 1px solid orange;
    border-top: none;
    background-color: navajowhite;
    margin: auto;
    display: none;
}

input[type="text"], textarea {
    background-color: white;
    display: inline;
}

input[type="text"] {
    width: 70%;
    height: 30px;
    font-size: 17px;
}

textarea {
    font-size: 13px;
    width: 99%;
    height: 250px;
}

JavaScript

$(document).ready(function() {
    $("div.block_name").click(function() {
        var elem = this;
        if ($(this).parent("div.block_header").next("div.block_text").is(":visible") == false) {
            $.ajax({
                url: "http://skanrs.co.cc/test.php",
                dataType: "html",
                success: function(html) {
                    $(elem).parent("div.block_header").next("div.block_text").text(html).slideDown("slow");
                },
            });
        }
        else {
            $(this).parent("div.block_header").next().slideUp("slow").empty();
        }
    });
    
    $("button.reduct").click(function() {
        if ($(this).parents("div.block_header").next("div.block_text").is(":visible") == false) {
            $(this).parents("div.block_header").children("div.block_name").trigger("click");
        }
        var name = $(this).parents("div.block_header").children("div.block_name").text();
        var text = $(this).parents("div.block_header").next("div.block_text").text();
        $(this).parents("div.block").wrap("<form id=\"edit_block\">");
        $(this).parents("div.block_header").children("div.block_name").replaceWith("<input id=\"name\" name=\"name\" type=\"text\" value=\""+name+"\" />");
        $(this).parents("div.block_header").next("div.block_text").html("<textarea id=\"text\" name=\"text\">"+text+"</textarea>");
        $(this).next().replaceWith("<button type=\"button\" class=\"cancel\">Отмена</button>");
        $(this).next().next().remove();
        $("button.cancel").click(function() {
            window.location.reload();
        });
        $(this).replaceWith("<input type=\"submit\" value=\"Сохранить\">");
        return false;
    });
    
    $("button.remove").click(function() {
        var choice = confirm("Вы уверены, что хотите удалить блок \""+$(this).parent().prev().text()+"\"?");
        switch (choice) {
            case true:
                if...