一组div点击其中一个添加样式并将其复制到另一个盒子里

一组div点击其中一个添加样式并将其复制到另一个盒子里，再次点击清除样式，复制的div也会被删除。点击复制的div会将自己删除，同时div自身样式清除。

好烦。。。。我做不到联动，只能改变自己，不好改变自己的同时改变另一个div，而且点一个就全删了

通过设置相同的class名进行查找，来进行绑定的删除或设置样式，代码供参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            *{
                margin:0;
                padding:0;
                list-style:none;
            }
			#box1{
				width: 300px;
				height: 200px;
				border: 3px solid lightblue;
			}
			#box2{
				width: 300px;
				height: 200px;
				border: 3px solid lightgreen;
				margin-top: 20px;
			}
			span{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2">
			<span class="lebel1">标签1</span>
			<span class="lebel2">标签2</span>
			<span class="lebel3">标签3</span>
			<span class="lebel4">标签4</span>
			<span class="lebel5">标签5</span>
		</div>
	</body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$("#box2 span").click(function () {
			if ($(this).css("color")=="rgb(255, 0, 0)") {
				var className = $(this).attr("class");
				$("#box1").find("."+className).remove();
				$(this).css("color","rgb(0, 0, 0)");
			}else{
				$(this).css("color","rgb(255, 0, 0)");
				$("#box1").append($(this).clone());
			}
		})
		
		$(document).on("click","#box1 span",function () {
			var className = $(this).attr("class");
			$("#box2").find("."+className).css("color","rgb(0, 0, 0)");
			$(this).remove();
		})
	</script>
</html>

效果图有吗

大概是这样