Showing and hiding divs on select option

My code was working and all of a sudden, it stopped…help please, anyone. PS: I’m new to web design

Paste it here not upload it in a file.

ok…here it is

<!doctype html>
<html lang = "en" dir = "ltr">
	<head>
		<meta http-equiv = "Content-Type" content = "text/html;charset = utf-8"/>
		<title>Fix-An-Event | Registration</title>
		<link rel = stylesheet href = 'css/outlook.css'>
		<script src = 'js/function.js'></script>
	</head>

	<body>
		<form method = "POST" action = "registered.php">
			<label for = "accounttype">Account Type</label> 
			<select name = "acctype" class = "typeOacct" id = "acctype" tabindex = "1">
				<option value = "0">--Select Account Type--</option>
				<option value = "1">Customer</option>
				<option value = "2">Vendor</option>
			</select>
			<div id = "opt1" class = "cust op">
				<form method = "POST" action = "registered.php">
					<!--This is the form for a regular customer-->
						<label for="fname">First Name:</label> <input type = 'text' id = 'fname' size = '25' tabindex = "2" maxlength = '20' required = ""></br></br>
						<label for="lname">Last Name:</label> <input type = 'text' id = 'lname' size = '25' maxlength = '20' tabindex = "3" required = ""></br></br>
						<label for="uname">Username:</label> <input type = 'text' id = 'uname' size = '25' tabindex = "4" maxlength = '20' required = ""></br></br>
						<label for="email1">Email:</label> <input type = 'text' id = 'email1' size = '30' tabindex = "5" maxlength = '50' pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required="" oldautocomplete = "remove" autocomplete = "off"/></br></br>
						<label for="email2">Confirm Email:</label> <input type = 'text' id = 'email2' size = '30' tabindex = "6" maxlength = '50' pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required="" oldautocomplete = "remove" autocomplete = "off"/></br></br>
						<label for="pwd1">Password:</label> <input type = 'password' id = 'pwd1' size = '25' tabindex = "7" maxlength = '20' required="" /></br></br>
						<label for="pwd2">Confirm Password:</label> <input type = 'password' id = 'pwd2' size = '25' tabindex = "8" maxlength = '20' required = ""></br></br>
						<input type = 'Submit' id = 'submit' tabindex = "9" value = 'Register'>
				</form>
			</div>
			<div id = "opt2" class = "vend op">
				<form method = "POST" action = "registered.php">
					<!--This is the form for a vendor-->
						<label for="cname">Company Name:</label> <input type = 'text' id = 'fname' size = '25' tabindex = "2" maxlength = '20' required = ""></br></br>
						<label for="uname">Username:</label> <input type = 'text' id = 'uname' size = '25' tabindex = "3" maxlength = '20' required = ""></br></br>
						<label for="email1">Email:</label> <input type = 'text' id = 'email1' tabindex = "4" size = '30' maxlength = '50' pattern = "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required="" oldautocomplete = "remove" autocomplete = "off"/></br></br>
						<label for="email2">Confirm Email:</label> <input type = 'text' id = 'email2' tabindex = "5" size = '30' maxlength = '50' pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required="" oldautocomplete = "remove" autocomplete = "off"/></br></br>
						<label for="pwd1">Password:</label> <input type = 'password' id = 'pwd1' tabindex = "6" size = '25' maxlength = '20' required = ""></br></br>
						<label for="pwd2">Confirm Password:</label> <input type = 'password' id = 'pwd2' tabindex = "7" size = '25' maxlength = '20' required = ""></br></br>
						<p>Select category/categories</p>
						<p><input type="radio" name="cake" id="cakeCat" tabindex = "8" value="Cake"/>Cake</p>
						<p><input type="radio" name="photo" id="photoCat" tabindex = "9" value="Photography"/>Photography</p>
						<p><input type="radio" name="dj" id="djCat" tabindex = "10" value="DJ"/>DeeJay</p>
						<p><input type="radio" name="venue" id="venueCat" tabindex = "11" value="Venue"/>Venue</p>
						<p><input type="radio" name="eventdecor" id="eventdecorCat" tabindex = "12" value="Event Decor"/>Event Decorator</p>
						<p><input type="radio" name="eventplan" id="eventplanCat" tabindex = "13" value="Event Planner"/>Event Planner</p>
						<p><input type="radio" name="makeup" id="makeupCat" tabindex = "14" value="Make-Up"/>Make-Up</p>
						<p><input type="radio" name="cater" id="cateringCat" tabindex = "15" value="Catering"/>Catering</p>
						<p><input type="radio" name="ushers" id="ushersCat" tabindex = "16" value="Ushers"/>Ushers</p>
						<p><input type="radio" name="others" id="otherCat" tabindex = "17" value="Other"/>Others</p>
						<input type = 'Submit' id = 'submit' tabindex = "18" value = 'Register'>
				</form>
			</div>
		</form>
	</body>
</html>

the javascript

$(document).ready(function(){
	$("select").change(function(){
		$( "select option:selected").each(function(){
			if($(this).val()=='0'){
				$('.op').hide();
			}
			if($(this).val()=='1'){
				$('.op').hide();
				$('.cust').show();
			}
			if($(this).val()=='2'){
				$('.op').hide();
				$('.vend').show();
			}
		});
	}).change();
});

the css

.div{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid black;
}
#opt1, #opt2{
display:none;
}
.op{
display:hidden;
border: 1px solid black;
}