Guest fiddle

Guest fiddle

HTML

<br />
<br />
<form name="form" method="post" action="addrsvp.php">
    <input type="hidden" name="subject" value="RSVP" />
    <input type="hidden" name="redirect" value="/thankyou" />
    <div align="center">
        <input type="radio" name="rsvp" id="accept" value="yes" title="accept" checked />Accept with Pleasure |
        <input type="radio" name="rsvp" id="decline" value="no" title="decline" />Decline with Regret
        <br />
        <br />Enter Your Email:
        <input type="text" id="email" name="email" size="40" placeholder="Email" />
        <br />
        <br />
    </div>
    <div align="center" id="yes" class="yes">
        <label for="db">Number of Guests</label>
        <select name="guestnum" id="guestnum">
            <option>Select Number of Guests</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
    </div>
    <div id="wrapper"></div>
    <div align="center" id="no" class="no" style="display:none;">
        <br />
        <p>We're sorry to hear you can't make it!
            <br />Please type your party's name so that we may update our guest list.</p>
        <br />
        <textarea id="message" name="message" rows="4" cols="30" wrap="physical" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')"></textarea>
    </div>
    <br />
    <div align="center">
        <input type="submit" value="Submit">
        <input type="reset" onClick="window.location.reload()">
    </div>
</form>

JavaScript

window.onload = function () {
    document.getElementById('decline').onchange = disablefield;
    document.getElementById('accept').onchange = disablefield;
};

function disablefield() {
    if (document.getElementById('decline').checked === true) {
        document.getElementById('guestnum').value = '';
        document.getElementById('guestnum').disabled = true;
    } else if (document.getElementById('accept').checked === true) {
        document.getElementById('guestnum').disabled = false;
    }
}

$(function () {

    $('#guestnum').change(function () {
        var no_of_values = $(this).val();
            if(isNaN(no_of_values)){
                $('#wrapper').html('');
            }
        var current_size = $('.guestDiv').size(); 
        current_size_i = 1;
        if(current_size > 0 && current_size < no_of_values){
				current_size_i = current_size;
				current_size_i++;
			}
         
        for(i =current_size_i;i<=no_of_values;i++){
            output = '<div align="center" id="guest'+i+'" class="guestDiv"><label for="g'+i+'">Guest '+i+'</label><input type="text" name="g'+i+'" placeholder=" Guest '+i+' Name" /><select name="g1entree" id="g1entree'+i+'"><option>Guest '+i+' Entree</option><option value="French Steak">French Steak</option><option value="Chicken Picatta">Chicken Picatta</option><option value="Salmon">Salmon with Pancetta Relish</option><option value="kids">Kids Entree</option></select></div>';
        $('#wrapper').append(output);
        }
        
       
        if(current_size > no_of_values){
            no_of_values--;
           $('#wrapper').children().eq(no_of_values).nextAll().remove();
        }
        
     
        
        $('.g1').slideUp("slow");
        $('.g2').slideUp("slow");
        $('.g3').slideUp("slow");
        $('.g4').slideUp("slow");
        $('.g5').slideUp("slow");
        $('.g6').slideUp("slow");
        $('.g7').slideUp("slow");
        $('.g8').slideUp("slow");
        $('.g9').slideUp("slow");
      ...