Move items v.2

With remove duplicates on left side.

by csornmo

HTML

<input type="button" id="Items_01" name="Items_01" value="Items_01">
<input type="button" id="Items_02" name="Items_02" value="Items_02">
<div>
    <ol id="selectable" class="ui-selectable" style="width:48%;float:left;background:#84ac38; border: 1px solid #267501;">

    </ol>
    <ol id="selected" class="ui-widget-content" style="width:48%;float:left;background:#e9b91c ;border: 1px solid #ce7b12;>
			
		</ol>
</div>

CSS

#selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    #selected .ui-selecting { background: #FECA40; }
    #selected .ui-selected { background: #F39814; color: white; }
    #selected { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selected li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

var arrSelectedItems = [];
var arrItems = [];
jQuery.fn.reverse = [].reverse;

function removeDuplicates() {
  	//alert("klick");
		for(var i=0; i < arrItems.length; i++) {
			for(var j=0; j < arrSelectedItems.length; j++) {
				if(JSON.stringify(arrItems[i])  == JSON.stringify(arrSelectedItems[j])) {
					arrItems.splice(i, 1);
				}
			}
		}
		
	}

$("#Items_02").click(function() {
       //alert("we");
       //$('#selectable').empty();
			for(var i=0; i < arrItems.length; i++) {
      	arrItems.splice(i, 10); //remove all in array
      }  
        
      arrItems.push([1,81003,"Gothenburg",7]);
			arrItems.push([2,81004,"Gothenburg",8]);
      arrItems.push([3,81005,"Gothenburg",9]);
      arrItems.push([4,81006,"Gothenburg",10]);
      arrItems.push([5,81007,"Gothenburg",11]);
      arrItems.push([6,81008,"Gothenburg",12]);
      showItems();
     });
     
$("#Items_01").click(function() {
       //alert("we");
       //$('#selectable').empty();
			for(var i=0; i < arrItems.length; i++) {
      	arrItems.splice(i, 10); //remove all in array
      }  
        
      arrItems.push([1,97013,"Umeå",8]);
      arrItems.push([2,97014,"Umeå",9]);
      arrItems.push([3,97015,"Umeå",10]);
      arrItems.push([4,97016,"Umeå",11]);
      arrItems.push([5,97017,"Umeå",12]);
      arrItems.push([6,97018,"Umeå",13]);
      showItems();
     });

function showItems() {		
		//alert("we");
    removeDuplicates();
    $('#selectable').empty();
		$(arrItems).each(function(i) {
			var stringItems = arrItems[i].toString().split(",");			
			$('#selectable').append("<li class=\"ui-widget-content\" value='"+ i +"'>"+ stringItems[1] +" &nbsp; "+ stringItems[2] +"  "+ stringItems[3] +"</li>").attr("class", "ui-widget-content");
		});
	}
  
  function showSelectedItems() {
		$('#selected').empty();
		$(arrSelectedItems).reverse().each(function(i) {
			var stringItem = arrSelectedItems[i].toString().split(",");
			$('#selected').append("<li class=\"ui-widget-content\" value='"+ i...