Displaying different content based on a drop down box

Hi ive the below piece of code, which im trying to: if the user selects a new starter from a drop down list a set of boxes will appear, but if the user selects file permissions from the drop down list a different set of boxes will appear.
At the min I can only get one or the other working both wont work for me
any tips would be great


<head>
<title>: : TITLE : :</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<cfoutput>
<script language="JavaScript1.2">
function showfilepath(selectid)
{
	if (selectid == "New Starter")
	{
	document.getElementById('employeetitle').style.display = '';
	document.getElementById('employeetitlebox').style.display = '';
	document.getElementById('employeesurnametext').style.display = '';
	document.getElementById('employeesurnamebox').style.display = '';
	}
	else
	{
	document.getElementById('employeetitle').style.display = 'none';
	document.getElementById('employeetitlebox').style.display = 'none';
	document.getElementById('employeesurnametext').style.display = 'none';
	document.getElementById('employeesurnamebox').style.display = 'none';
	}
}
</script>
</cfoutput>
<cfoutput>
<script language="JavaScript1.2">
function showfilepath(selectid2)
{
	if (selectid2 == "File Permissions")
	{
	document.getElementById('filepathtext').style.display = '';
	document.getElementById('filepathbox').style.display = '';
	document.getElementById('accesstypelabel').style.display = '';
	document.getElementById('accesstypeselect').style.display = '';
	}
	else
	{
	document.getElementById('filepathtext').style.display = 'none';
	document.getElementById('filepathbox').style.display = 'none';
	document.getElementById('accesstypelabel').style.display = 'none';
	document.getElementById('accesstypeselect').style.display = 'none';
	}
}
</script>
</cfoutput>


<td colspan="2" id="employeetitle" style="display:none;"><label for="employeetitle">New Employee Title :
		<select name="employeetitle" id="employeetitle">
			<option value="Mr">Mr</option>
			<option value="Mrs">Mrs</option>
			<option value="Mrs">Miss</option>
		</select>
		</td>
	</tr>
	<tr>
		<td colspan="2" id="employeetitle" style="display:none;"><label for="employeesurnametext">New Starter Surname :</label></td>
	</tr>
	<tr>
		<td colspan="2" id="employeesurnamebox" style="display:none;"><input type="input" name="employeesurname" id="employeesurname" size="80" /></td>
	</tr>
	<tr>