Это набросок на первый случай )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="multi">
<div id="list"></div>
<div>
<span class="btn" onclick="multi();"><<<</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;
window.onload = function(){
var items = document.querySelectorAll('.list .li');
for(var i = 0; i < items.length; i++){
items[i].onclick = activeItem;
}
function activeItem(){
this.classList.toggle('active');
activ = this.innerHTML;
}
}
function multi(){
var div = document.createElement('li');
div.className = 'li';
div.innerHTML = activ;
list.appendChild(div);
}
</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;
}
.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>
