Change content on dropdown problems
===

I want to a dropdown menu that if I select `value1` I get a couple of input fields, and if I select `value2` I get some other input fields. So I found this code online, and I'm trying to adjust it to my needs. Unfortunately it doesn't work, the tables are ALWAYS showing. If I don't work with tables (just plain text) the code works. 

**Javascript**

	<script type='text/javascript' src='http://jsfiddle.net/js/lib/mootools-core-1.4.5-nocompat.js'></script>
    <script type='text/javascript'> 
    
    function showForm(id) {
        document.getElementById('submitForm').style.display = "block";
        if (id == 0) {
            document.getElementById('submitForm').style.display = "none";
        }
        for (var i = 1; i < 4; i++) {
            if (i == id) {
                document.getElementById(i).style.display = 'block';
            } else {
                document.getElementById(i).style.display = 'none';
            }
        }
    }
    </script>

**HTML**
           
    <table>
        	<tr>
            	<td>Selecteer uw materiaal: </td>
                <td>
                <select id="dropdownMenu" name="dropdownMenu" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
                    <option value="0">Choose an option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Other</option>
        		</select></td>
            </tr>
        <div id="1" style="display: none;">
        <tr>
            <td>Aantal videobanden: </td>
            <td><input type="text" name="aantalVideo" value="" /></td>
        </tr>
        <tr>
            <td>Geschatte speelduur (in minuten): </td>
            <td><input type="text" name="duurVideo" value="" /></td>
        </tr>
        </div><!-- /1 -->
        <div id="2" style="display: none;">
        <tr>
            <td>Aantal spoelen: </td>
            <td><input type="text" name="aantalSpoelen" value="" /></td>
        </tr>
        <tr>
            <td>Geschatte speelduur (in minuten): </td>
            <td><input type="text" name="duurSpoelen" value="" /></td>
        </tr>       
        </div><!-- /2 -->
        <div id="3" style="display: none;">
       	<tr>
        	<td>&nbsp;</td>
            <td>Overig</td>
        </tr>
        </div><!-- /3 -->
        <div id="submitForm" style="display: none;">
        <tr>
        	<td>&nbsp;</td>
            <td><input value=" Order aanmaken " type="submit"></td>
        </tr>
        </div><!-- /submitForm -->
        </table>