Append/Move to List from List

Here using this Javascript code you can add element from one list to another list. First list is the super set. Assume it is coming from database. It is listing all the relevant skills. User will select skills from this list. When they double click to first list element or click on “>>” button then the selected element will be assigned to left list/select.
The HTML below will generate output like this:
Javascript Code for append and clear options from list

<script type='text/javascript'>function append (frm) {
s1 = frm.elements['skills[]'];
s2 = frm.elements['selSkills[]'];
b = false; s1Index = s1.selectedIndex;
val = s1.options[s1Index].text; // current value of s1
c = s2.length; // current value of select 2
if (c > 0)  {
// loop s2, check if already added
for (i=0; i < c; i++)  {
 if (val == s2.options[i].text)
 b = true; // matched, no addition
 if (b == false)  {
  op = new Option(val);
  s2.options[c] = op; // add option to s2
 else {
  alert('Already added.');
else {
 op = new Option(val);
// assign to left list
s2.options[c] = op;
function clr (frm) {
theList = frm.elements['selSkills[]'];
 itemNo = theList.selectedIndex;
 if (itemNo != -1)
theList.options[itemNo] = null;
HTML Code for copying list's element to list

<form method="post">
<select size='4' name='skills[]' ondblclick='javascript:append(this.form)' title='double click to select'>
<option value='PHP'>PHP</option>
<option value='MySQL'> MySQL </option>
<option value='ApacheConf'> ApacheConf </option>
<option value='Javascript'> Javascript </option>
<option value='CSS'> CSS </option>
<option value='HTML'>HTML</option>
<input type="button" onclick="javascript:append(this.form)" value=">>"title='select/move to left' />
<select name='selSkills[]' multiple></select>
<input type='button' name='clear' value='Clear' onclick='clr(this.form)' title='clear list' />

Check this:
sorting on table column
Populate select list by ajax