Trying to dynamically add radio button + handler to my form on a button click, what am I doing wrong?

Trying to dynamically add radio button + handler to my form on a button click, what am I doing wrong?

I am trying to produce a web form to allow wedding guests to RSVP. The form allows them to enter a name and select from a radio button whether they will be attending or not. If they select the "yes" radio button then a further pair of radio buttons are displayed for their meal preference.

They can then click a submit button or they can click another button to add another line for another guest which operates in exactly the same way. I've almost got this working, but it seems that the checkbox change handler is lost for the current guest when a new guest is added and the checkbox value is reset. I've got a feeling I'm doing something stupid but can't for the life of me figure out what. Can anyone help?

Code (source file (renamed to .txt) also attached as I'm not sure the pasted code is too clear):

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>RSVP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- include jQuery library -->
    <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.form.js"></script>
    <script type="text/javascript">
    var numGuests = 1;

    function AddGuestEntry(guestNum){
        document.getElementById('guest_form_entries').innerHTML+=guestNum+": Name <input type='text' name='name"+guestNum+"' /><input type='radio' name='attend_yesno"+guestNum+"' value='1'/> Can <input type='radio' name='attend_yesno"+guestNum+"' value='0' checked='checked'/>Cannot Attend<span id='food_choice"+guestNum+"'></span><br/>";
       
        $("input[name='attend_yesno"+guestNum+"']").change(function() {
                if ($("input[name='attend_yesno"+guestNum+"']:checked").val() == 1)
                    document.getElementById("food_choice"+guestNum).innerHTML="<input type='radio' name='meal"+guestNum+"' value='0' checked='checked'/>Duck <input type='radio' name='meal"+guestNum+"' value='1'/>Veg";
                else
                    document.getElementById("food_choice"+guestNum).innerHTML="";
        });
    }

    // Initialise with one guest already listed
    $(document).ready(function() {
        AddGuestEntry(numGuests);
       
        $("input[name='add_guest']").click(function() {
            numGuests += 1;
            AddGuestEntry(numGuests);
        });

        // Final submit handler
        $('#rsvpForm').ajaxForm(function() {
            document.getElementById('formContent').innerHTML="Thanks";
        });
               
    });
    </script>

    </head>
    <body>
    <div id="formContent">
    <form id="rsvpForm" action="rsvp.php" method="post">
    <div id="guest_form_entries"></div>
    <input type="button" name="add_guest" value="Add Guest"/>
    <input type="submit" value="Submit" />
    </form>
    </div>