jquery动态添加、删除dom元素

点击标签，在下方动态添加选中的元素及内容，再次点击标签，在下方动态删除选中的标签及元素

如图默认状态

点击1和2时，如图

再次点击1，效果如图

具体代码html代码如下：

<div class="layui-card">
				<div class="layui-card-header">
					全部标签
				</div>
				<div class="layui-card-body">
					<div class="alllabel">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
						<div>5</div>
						<div>6</div>
						<div>7</div>
						<div>8</div>
						<div>9</div>
						<div>10</div>
					</div>
				</div>
			</div>
			<div class="layui-card" style="margin-top:10px;">
				<div class="layui-card-header">
					我订阅的标签
				</div>
				<div class="layui-card-body">
					<div class="mylabel">	
					</div>
				</div>
			</div>

js代码如下

	/*
	* 标签点击事件
	* */
	var divlabel='';
	$(".alllabel>div").click(function(){
		var index=$(this).index();
		if(  $(this).hasClass("selected")){
            $(this).removeClass("selected")
            divlabel='<div>'+$(this).html()	+'</div>'
            $('div[data-id="id'+index+'"]').remove();
		}else{
            $(this).addClass("selected");
            divlabel='<div data-id="id'+index+'">'+$(this).html()+'</div>'
			$('.mylabel').append(divlabel)
		}
	})