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;
padding: 10px;
}
.patern{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".add").click(function() {
var html = "<input><span class='remove'>";
var li = $("<li>").appendTo("ul");
var sel = $(".patern").clone(true).removeClass("patern").appendTo(li);
$(html).appendTo(li);
li.on("click", ".remove", function() {
var data = sel.data("opt");
$(".form-control").not(sel).append($(data).clone());
li.remove()
})
});
$("ul").on("change", ".form-control", function() {
var i = this.selectedIndex;
var value = this.value;
var data = $(this).data("opt");
if (i) {
$(".form-control").not(this).find("option[value='" +
value + "']").remove();
$(this).data("opt", this.options[i])
} else $(this).removeData("opt");
if (data) $(".form-control").not(this).append($(data).clone())
})
});
</script>
</head>
<body>
<ul>
</ul>
<select class="patern form-control js-category-select" >
<option value="" >Select 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>
<input name="" type="button" value="Add Category" class="add">
</body>
</html>