Appended input set of input form - hide extra fields until first field is selected

Question

I have a question about appending a set of input fields with some of the fields disabled by default until the first field is answered. Here is the code for my appended fields.

    var count = 0;
    $(function(){
    $('a#add_field').click(function(){
    count += 1;
    $('#row-fluid').append(

    '<div class="span1">'
    +'<label>Type</label>'
    +'<select id="upg' + count + '" name="upg' + count + '"  class="input-small" >'
    +'<option value="" selected="&nbsp;" >&nbsp;</option>'
    +'<option value="Exp" >Exp</option>'
    +'<option value="Post" >Post</option>'
    +'<option value="Upgrade" >Upg</option>'
    +'<option value="Retail" >Retail</option>'
    +'</select>'
    +'</div>'

    +'<div id="upgDate" class="span2">'
    +'<label>Full Date</label>'
    +'<input name="upg_date' + count + '" id="upg_date' + count + '" type="text" id="upg_date" placeholder="YYYY-MM-DD" class="input-small" />'
    +'</div>'

    );
    });
    });

Basically, the input "Full Date" should be hidden by default and only to appear if the selected "Type" is EXP and this condition should exist on all appended input set. Thank you and I hope someone can guide me on this.

Answer 1

Try this:

$("#upg").change(function(){
    if ($("#upg").val() == "EXP") {
       $('#upg_date').show();
    } else {
       $('#upg_date').hide();
    }
});