Hi All,

I have the following HTML and JS which allows the user to transfer an option from one select to another.

Code HTML4Strict:
<html>
	<head>
		<title>Multi-list copy example</title>
	</head>
	<script language="Javascript">
		function SelectMoveRows(SS1,SS2)
		{
			var SelID='';
			var SelText='';
			// Move rows from SS1 to SS2 from bottom to top
			if(SS1.name == 'availableCourses' && SS2.length <= 3)
			{
				alert('A maximum of 3 courses allowed');
			}
			else
			{
				for (i=SS1.options.length - 1; i>=0; i--)
				{
					if (SS1.options[i].selected == true)
					{
						SelID=SS1.options[i].value;
						SelText=SS1.options[i].text;
						var newRow = new Option(SelText,SelID);
						SS2.options[SS2.length]=newRow;
						SS1.options[i]=null;
					}
				}
				SelectSort(SS2);
			}
 
		}
		function SelectSort(SelList)
		{
			var ID='';
			var Text='';
			for (x=0; x < SelList.length - 1; x++)
			{
				for (y=x + 1; y < SelList.length; y++)
				{
					if (SelList[x].text > SelList[y].text)
					{
						// Swap rows
						ID=SelList[x].value;
						Text=SelList[x].text;
						SelList[x].value=SelList[y].value;
						SelList[x].text=SelList[y].text;
						SelList[y].value=ID;
						SelList[y].text=Text;
					}
				}
			}
		}
	</script>
	<body>
 
		<table border="0" cellpadding="3" cellspacing="0">
			<tr>
				<td>
					<p>Available Courses</p>
 
					<select name="availableCourses" id="availableCourses" size="20" multiple="multiple" ondblclick="" >
						<optgroup label="Business Skills">
							<option value="1">Course 1</option>
							<option value="2">Course 2</option>
							<option value="3">Course 3</option>
							<option value="4">Course 4</option>
							<option value="5">Course 5</option>
						</optgroup>
						<optgroup label="IT Training">
							<option value="6">Course 6</option>
							<option value="7">Course 7</option>
							<option value="8">Course 8</option>
							<option value="9">Course 9</option>
							<option value="10">Course 10</option>
						</optgroup>
					</select>
				</td>
				<td align="center" valign="middle">
					<input type="button"	 value="Add &raquo;" style="width:100px" onClick="SelectMoveRows(document.getElementById('availableCourses'), document.getElementById('selectedCourses'))"><br>
					<br>
					<input type="button" value="&laquo; Remove" style="width:100px" onClick="SelectMoveRows(document.getElementById('selectedCourses'), document.getElementById('availableCourses'))">
				</td>
				<td>
					<p>Selected Courses</p>
					<select name="selectedCourses[]" id="selectedCourses" size="20" multiple="multiple" >
 
					</select>
				</td>
			</tr>
		</table>
 
	</body>
</html>

This works great until I want to remove an option from the second select box. The options in the 1st select then get all mixed up. The problem is because I am using Option Groups. Please could someone help me and tell me how to sort the select based on the Option groups and then alphabetically

Cheers