Two select contents move left and right

<div class= "Centent" ><select multiple id= "Select1"  style= "width:130px;height : 180px; " ><option value= "1" > Sunkeje </option><option value= "2" > Zhu Xinzong </option><option  value= "3" > Yangfan </option><option value= "4" > Lam-</option><option value= "5" > Alexander </option><option value= "6" > Ling Feng </option><option value= "7" > Song Song </ Option><option value= "8" > PDF </option></select><div class= "span1" ><span  id= "Add" > Move right >></span><br/><span id= "Add_all" > All >></span></ div></div><div class= "Centent" > <select multiple id= "Select2"  style = "width:130px;height:180px" ></select><div class= "span2" ><span id= "Remove"   style= "width:500px" > Left shift <<</span><br/><span id= "Remove_all" > All <<</span ></div></div> 

<style type= "Text/css" >span{border:1px solid black; Background-color: #99FFFF; cursor:pointer;}. Centent{width:200px;float:left;}. span1{position:absolute;top:350px;left:150px;} #add_all {position:absolute;top:30px;}. span2{position:absolute;top:410px;left:150px;} #remove_all {position:absolute;top:30px;} </style> 

<script>$ (function () {$ ("#add"). Click (function () {var $options = $ ("#select1 option:selected");//Gets the selected option $ Options.appendto ("#select2");//Append to Select2 's Select}), $ ("#add_all"). Click (function () {var $options = $ ("#select1 Option "), $options. AppendTo (" #select2 ");}); /implement double-click to move the $ ("#select1") to the right. DblClick (function () {var $options = $ ("#select1 option:selected"); $options. AppendTo ("# Select2 ");}); $ ("#remove"). Click (function () {var $options = $ ("#select2 option:selected"); $options. AppendTo ("#select1"); $ ("#remove_all"). Click (function () {var $options = $ ("#select2 option"); $options. AppendTo ("#select1");}); $ ("#select2"). DblClick (function () {var $options = $ ("#select2 option:selected"); $options. AppendTo ("#select1");}); </script>

Two select contents move left and right