I have the below html form and need to write javascript to hide different parts of the form depending on the top radio button selected.

```
<form action="" method="post">

    <label for="number">Number of guests: *
        <input name="number" type="radio" value="1" />1
        <input name="number" type="radio" value="2" />2
        <input name="number" type="radio" value="3" />3
        <input name="number" type="radio" value="4" />4
        <input name="number" type="radio" value="5" />5
    </lable>

    <div id="rsvp1">
        <label for="name">Name: *
            <input name="name" type="text" value="" />
        </label>

        <label for="attending">Attending?: *
            <input name="attending" type="radio" value="Yes" />Yes
            <input name="attending" type="radio" value="No" />No
        </label>
        <label for="dietary">Dietary Requirements?: *
            <input type="checkbox" name="dietary" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
        </label>

        <label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
        </label>
    </div>

    <div id="rsvp2">
        <label for="name1">Name: *
            <input name="name1" type="text" value="" />
        </label>

        <label for="attending1">Attending?: *
            <input name="attending1" type="radio" value="Yes" />Yes
            <input name="attending1" type="radio" value="No" />No
        </label>
        <label for="dietary1">Dietary Requirements?: *
            <input type="checkbox" name="dietary1" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary1" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
        </label>

        <label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
        </label>
    </div>

    <div id="rsvp3">
        <label for="name2">Name: *
            <input name="name2" type="text" value="" />
        </label>

        <label for="attending2">Attending?: *
            <input name="attending2" type="radio" value="Yes" />Yes
            <input name="attending2" type="radio" value="No" />No
        </label>
        <label for="dietary2">Dietary Requirements?: *
            <input type="checkbox" name="dietary2" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary2" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
        </label>

        <label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
        </label>
    </div>

    <div id="rsvp4">
        <label for="name3">Name: *
            <input name="name3" type="text" value="" />
        </label>

        <label for="attending3">Attending?: *
            <input name="attending3" type="radio" value="Yes" />Yes
            <input name="attending3" type="radio" value="No" />No
        </label>
        <label for="dietary3">Dietary Requirements?: *
            <input type="checkbox" name="dietary3" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary3" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
        </label>

        <label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
        </label>
    </div>

    <div id="rsvp4">
        <label for="name4">Name: *
            <input name="name4" type="text" value="" />
        </label>

        <label for="attending4">Attending?: *
            <input name="attending4" type="radio" value="Yes" />Yes
            <input name="attending4" type="radio" value="No" />No
        </label>
        <label for="dietary4">Dietary Requirements?: *
            <input type="checkbox" name="dietary4" value="veggie">Veggie<br>
            <input type="checkbox" name="dietary4" value="allergies">Allergies (Please State)<br>
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
        </label>

        <label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
            <textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
        </label>
    </div>
    <input name="submitted" type="hidden" value="1" />

    <input type="submit" />

</form>

```

So for example when the 1 radio button is shown just the rsvp1 div will be shown (With div 2, 3, 4 and 5 hidden). When the 2 radio button is pressed rsvp2 and 1 would be shown etc.

I know I can use:

```
   document.getElementById(rsvp1).style.visibility="visible";

```

But how would I set the script up to go with the radio button change.

This will be added to a wordpress site if it makes any difference