Why does my jquery work on jsFiddle but not on my localHost?

Question

The code that works on jsFiddle: http://jsfiddle.net/NTadX/
My jquery code:

<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/CSS/mystyle.css" />

<style>
    $(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</style>

I have checked around and the above code only starts when the document is fully loaded... i really don't know why it isn't working. I'm running this on google app engine. Thanks

Answer 1

Put your code in a script tag:

<script type="text/javascript">
$(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</script>