Javascript-форум - Как сделать multiple

На первый случай)
Но вот тут есть варианты по интереснее - https://learn.javascript.ru/modifying-document

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<div class="multi">
		<div id="list2"></div>

		<div>
			<span class="btn" onclick="multi();"><<<</span>
			<span class="btn" onclick="multiDel();">>>>></span>
		</div>

		<div class="points">
			<ul class='list'>
				<li class="li">lorem1</li>
				<li class="li">lorem2</li>
				<li class="li">lorem3</li>
				<li class="li">lorem4</li>
				<li class="li">lorem5</li>
				<li class="li">lorem6</li>
				<li class="li">lorem7</li>
				<li class="li">lorem8</li>
				<li class="li">lorem9</li>
				<li class="li">lorem10</li>
			</ul>
		</div>
	</div>

	<script>
		var activ;

		function jq(){
			var items = document.querySelectorAll('.multi .li');
			for(var i = 0; i < items.length; i++){
				items[i].onclick = activeItem;
			}
			function activeItem(){
				this.classList.toggle('active');
				activ = this;
			}
		}

		function multi(){
			var div = document.createElement('li');
			div.className = 'li';
			div.innerHTML = activ.innerHTML;
			list2.appendChild(div);
			jq();
		}

function multiDel(){
activ.parentNode.removeChild(activ);
}

		jq();
	</script>

	<style>
	body, html{
		min-height: 100%;
		height: 100%;
		margin:0;
	}
	.multi{
		height: 100%;
		width: 800px;
		margin:0 auto;
	}
	.multi div{height: 100%;
		float:left;
		width: 33%;
		border-right: 1px  solid #ccc;
	}
	.list li{
		padding:10px;
		cursor:pointer;
	}
	.list li:hover{
		background: #ccc;
	}

	#list2 li{
		padding:10px;
		cursor:pointer;
	}
	#list2 li:hover{
		background: #ccc;
	}

	.btn{
		padding:10px;
		margin:40px;
		background: #f1f1f1;
		border:1 px solid #ccc;
		border-radius:5px;
		display:block;
	}
	.btn:hover{
		background: #ccc;
		cursor:pointer;
	}
	.active{
		background: #ccc;
		color:blue;
	}
</style>
</body>
</html>