JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.js"></script>
<section class="panel panel-margin-settings" id="first-component">
    <header class="panel-heading">
        <h2 class="panel-title">Categories</h2>
    </header>
    <a class="new-category" id="add-new-app-category">+ New Category</a>

    <div class="panel-body">
      <div class="dd" id="nestable">
        <ol class="dd-list" id="dd-list-app-categories-container">
           <li class="dd-item" data-id="1">
              <div class="dd-handle">
                  <span id="category-item">Item 1</span>
                  <a href="#" class="close close-assoc-file" 
                     data-dismiss="alert" aria-label="close">&times;</a>
              </div>
           </li>
        </ol>
      </div>
    </div>
</section>

CSS

/**
 * Panel
 */
.panel {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
/*    border-radius: 4px;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*    overflow-y: auto;*/
    /*width:431px;*/
    /*width:402px;*/
}

.panel-margin-settings {
    margin-left:20px;
    margin-bottom:15px;
}


#first-component {
    margin-top:33px;
}
 



/**
 * Nestable
 */

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

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: 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: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width:...

JavaScript

// activate Nestable for list 1
$('#nestable').nestable()

// FOR ADDING
var nestablecount = 1;
$('#add-new-app-category').click(function () {
  $('#dd-list-app-categories-container').append('<li class="dd-item" data-id="' + (++nestablecount) + '"><div class="dd-handle"><span id="category-item">Item ' + nestablecount + '</span>'  +'<a href="#" class="close close-assoc-file" data-dismiss="alert" aria-label="close">&times;</a>' + '</div>' + '</li>');
            });


// FOR REMOVING
$("#dd-list-app-categories-container").on("click", ".close", function (event) {
    $(this).closest('li').remove();

    if (nestablecount > 0)
        nestablecount--;
});


// FOR EDIT

$('#dd-list-app-categories-container').on('dblclick', '#category-item', 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>');
            });