JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel panel-default" ng-app="app" ng-controller="appCtrl">
  <div class="panel-heading">Components configuration:</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-lg-3">
        <div class="jumbotron" style="min-height: 300px;">
          <div class="container">
            <div class="">
              <ul class="list-group" id="dropleft">
                <li class="ui-state-default drag-n-drop-clone" drag-option="dropleft" ng-repeat="component in components">
                  <span class="label label-primary">{{component.name}} 
                                                <a href="#" ng-click="$root.removeDraggedItem($event)"><i style="color: white" class="fa fa-times hidden" aria-hidden="true"></i></a>
                                            </span>
                </li>
                <li class="ui-state-default drag-n-drop-clone" drag-option="clone">
                  <span class="label label-success">Manual Intervention 
                                                <a href="#"><i style="color: white" class="fa fa-times hidden" aria-hidden="true"></i></a>
                                            </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="jumbotron sortable" id="dropright" style="min-height: 300px;">
        </div>
      </div>
    </div>
 ...

CSS

ul,
li {
  list-style-type: none;
}
/*
    Release Dashboard
*/
.dashboard-header {
    margin-top: 31px;
}

.release-action-btn {
    border-color: #fff;
}

.status-color-red {
    background-color: #d9534f;
    color: white;
}
.status-color-success {
    background-color: #5cb85c;
    color: white;
}
.status-color-new {
    background-color: #999999;
    color: white;
}
.status-color-inprogress {
    background-color: #337ab7;
    color: white;
}

.panel-default > .panel-heading, .table-header, .navbar-inverse {
    background-color: #164c9c !important;
    color: white;
}

JavaScript

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $rootScope) {
  $scope.title = "Test";
  $rootScope.removeDraggedItem = function($event) {
    var element = $(event.target).closest("li");
    console.log(element.attr("drag-option"));
    if (element.attr("drag-option") === "clone") {
      element.detach();
    } else {
      // Move to its original place
      console.log("No clone detected! Moving element to its original place...");
      var attrVal = element.attr("drag-option");
      $(element).find("i").addClass("hidden");
      $(element).detach().appendTo("#" + attrVal);
    }
  };
  $scope.components = [{
    "name": "Component App1"
  }, {
    "name": "Component App2"
  }, {
    "name": "Component App3"
  }, {
    "name": "Component SQL1"
  }, {
    "name": "Component SQL2"
  }];
});
app.directive('dragNDrop', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          revert: function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
          }
        });
        $('#dropright').droppable({
                        drop: function (event, ui) {
                            $(this).find("li").find("i").removeClass("hidden");
                            if ($(this).find("li").attr("drag-option") === "clone")
                            {
                                console.log($(this).find("li").find("a"));
                                $(this).find("li").find("a").on('click',...