using jQuery

I’m trying to create a dependant select using jQuery. The example I have used is here – http://www.lisenme.com/dynamic-dependent-select-box-using-jquery-ajax-php/. Creating this outside WP works fine and linking to the built-in jQuery files works. I have replaced the ‘$’ with ‘jQuery’ but the script doesn’t work. Is there a problem using jQuery?

<select name="Brewery" id="brewery_id" tabindex="1">
<option selected disabled value="">--- Select Brewery ---</option>
<?php foreach ($wpub_breweries as $wpub_result)
    {
     echo '<option value="' . $wpub_result->BreweryCode . '">' . 
                            $wpub_result->QualifiedBreweryName . '</option>' . "\r\n\t\t\t\t\t\t";
                            }
?>
</select>
<select name="Beer" id="beer_id">
<option value="">Select Brewery first</option>
</select>
<script>
jQuery(document).ready(function(){
    jQuery('#brewery_id').on('change',function(){
        var BreweryID = jQuery(this).val();
        if(BreweryID){
            jQuery.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'BreweryCode='+BreweryID,
                success:function(html){
                    jQuery('#beer_id').html(html);
                }
            }); 
        }else{
            jQuery('#beer_id').html('<option value="">Select Brewery first</option>');
        }
    });
</script>