Jquery :: Hide Input Field If Dropdown Item Selected

I have a page as below, I hope the form only show Select option when loading, then the input date fields will be displayed if select event category, where are the errors?

Code:
<script src="/misc/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.viewInput = { '0' : $([]),
//THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
'1' : $('#1'),
};
$('#category_class').change(function() {
// HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
$.each($.viewInput, function() { this.hide(); });
// SHOWS THE INPUT FIELD ITEM IF SELECTED
//$.viewInput[$(this).val()].show();
}); });
</script>

<table cellpadding=4 cellspacing=1 width="650" border=0 class='list'>
<tr> <td class='caption'>
<form action="save.asp" name="pvt_spec" method="post">
<table border=0 cellpadding=4 cellspacing=0>
<div id="1"> <tr>
<td nowrap><font size=2 color="#ff0000"></font>Start Date</td> <td class='data'>
<input onClick="this.select()" tabindex="1" type="text" name="s_dt" value="2000/01/01" size="13" maxlength="13" STYLE='text-align=center;'>
</td> </tr> <tr>
<td nowrap><font size=2 color="#ff0000"></font>End Date</td> <td class='data'>
<input onClick="this.select()" tabindex="1" type="text" name="f_dt" value="2078/12/31" size="13" maxlength="13" STYLE='text-align=center;'>
</td> </tr> </div> <tr> <td>category</td> <td class='data'>
<select name="category_class" id="category_class" tabindex=1><option value="1">Base category</option><option value="2">Parent Event Category</option><option value="3">Son Event Category</option></select>
</td> </tr> </td> </tr> </table>