JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel-body">
    <div class="dd" id="nestable">
        <ol class="dd-list" id="category-list">
            <li class="dd-item" data-id="3">
                <div class="dd-handle">
                    <span>Item 3</span>
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                </div>
            </li>
            <li class="dd-item" data-id="4">
                <div class="dd-handle">
                    <span>Item 4</span>
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                </div>
            </li>
            <li class="dd-item" data-id="5">
                <div class="dd-handle">
                    <span>Item 5</span>
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                </div>
            </li>
        </ol>
    </div>
</div>

CSS

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    /*    list-style: none;*/
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: decimal;
    /*    list-style: none;*/
}

.dd-item,
.dd-empty,
.dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

.dd-handle {
    display: block;
    height: 34px;
    margin: 5px 0;
    padding: 6px 10px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #CCC;
    background: white;
    /*    background: #F6F6F6;*/
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

JavaScript

$("#category-list").on("click", ".close", function(e) {
    $(this).closest('li').remove();
}).on('click', 'span', function() {
	var $input = $('<input type="text" value="' + $(this).text().trim() + '" />');
	$(this).replaceWith($input);
	$input.select();
}).on('blur', 'input', function() {
	$(this).replaceWith('<span>' + $(this).val() + '</span>');
});