Display text info boxes with conditional Need a bit of help

JavaScript
1

Hey everyone,

I am working on a project right now, I have a checkbox (styled as a switch) that when the user clicks fades in a entry box - works perfect!

But now what I want to do is extend this so instead of just one entry box in that section fading in new sections will fade in with them. So heres what I have done (with some help from a friend -still new to jQuery & JavaScript - I have never really worked with it much)

Here’s the css



<div class="control-group">
	<label class="control-label" for="dateSold" >Have you sold the animal?</label>
    <div class="controls">
    	<div class="hidden">
    		<label for="dateSold" id="ifsoldHeader">Date Sold</label>
    	</div>
    	<label>
    		<input type="checkbox" name="didSell" value="yes" data-related-item="sold" id="check" class="ace-switch ace-switch-2" />
    		<span class="lbl"></span>
		</label>
    	<div class="hidden">
    		<h5 id="sold">Date Sold:
    		 <input name="dateSold" id="sold" class="datepicker required" type="text" maxlength="11" value="<?php echo date('Y-m-d');?>"/></h5>
    	</div>
	</div>
</div>
<div class="hidden">
	<div class="control-group" id="bought">
    <label class="control-label" for="priceBoughtFor">Did you buy the animal?</label>
    <div class="controls">
    		<span class="add-on"><i class="icon-dollar"></i></span>
			<input id="bought" name="priceBoughtFor" type="text" maxlength="11" class="required" value="" />
		</div>
	</div>
</div>

and here’s the jQuery code


function evaluate(){
    				var item = $(this);
    				var relatedItem = $("#" + item.attr("data-related-item")).parent();

    					if(item.is(":checked")){
        					relatedItem.fadeIn();
    					}else{
        					relatedItem.fadeOut();
    					}
					}

				$('input[type=checkbox]').click(evaluate).each(evaluate);

So i thought by adding a id tag to the section that I want to appear with a corresponding ID it should appear much like the date field in the example above however it does not. Here’s what I have


<div class="hidden">
	<div class="control-group" id="bought">
    <label class="control-label" for="priceBoughtFor">Did you buy the animal?</label>
    <div class="controls">
    		<span class="add-on"><i class="icon-dollar"></i></span>
			<input id="bought" name="priceBoughtFor" type="text" maxlength="11" class="required" value="" />
		</div>
	</div>
</div>

the hidden class just hides it from view.

Now when I click the checkbox the datefield shows up but none of the other elements with the corresponding ID (and the script it is below everything else).

Thanks in advanced for any help.
Colin