Gidpoiiohika,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.remove:after{
content: "Remove Category";
background-color: #0000FF;
padding: 5px;
margin: 5px;
border-radius: 4px;
}
li{
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".form-control").change(function() {
var i = this.selectedIndex;
var opts = this.options;
if (i) {
var opt = opts[i];
opts.remove(i);
var html = opt.text + "<span class='remove'>";
var li = $("<li>", {html:html}).appendTo("ul");
li.on("click", ".remove", function() {
li.remove();
opts.add(opt);
opts.selectedIndex = 0;
});
}
});
});
</script>
</head>
<body>
<ul>
</ul>
<select class="form-control" >
<option value="" >Add Category</option>
<option data-default_external_rate="0" value="5">Management</option>
<option data-default_external_rate="0" value="7">DevOps</option>
<option data-default_external_rate="0" value="8">Design</option>
</select>
</body>
</html>