jQuery hide div based on input value

Question

Checking the other threads I feel like my code should work, but I must be missing something. I am trying to hide/show a div based on the input value; when the input is 1, there will be one div; when it's 2, the second div will show; if 3, third div, etc... Here is my page .

On the page, if you select the Individual option, two new div's appear. Essentially only the first please choose your meal div will appear, and when the user changes the input to 2, the second one will appear. If the user goes back to 1, the second div should hide.

jQuery(function($) {
   //create div to wrap individual meal options
    $('.product-addon-please-choose-your-meal').before('<div id="individual-meals"></div>');

    //add meal choices to div
    $('.product-addon-please-choose-your-meal').appendTo('#individual-meals');
    $('.product-addon-please-choose-your-meal-2').appendTo('#individual-meals');

    //hide 2nd option if input is 2
    if ($('input[type="number"]').val() == 2) {
        $('.product-addon-please-choose-your-meal-2').hide();
    }

    //show meal options depending on user choice
    $('form').on('change', '#purchase', function(){
        // Reset required fields and hide fields
        $('select, input').prop('required', false);
        $('#table-meals, #individual-meals').hide();

        if($(this).val()=="Individual") {
            $('#individual-meals').show();
            $("#table-meals").not("#individual-meals").hide();
            $('input').prop('required',true);
            $('#table-meals select').val("Select an Option...");
        }

        if($(this).val()=="Table of 10") {
            $('input[type="number"]').val("10").prop('readonly', true);
            $("#individual-meals").not("#table-meals").hide();
            $('#table-meals').show();
            $('select').prop('required',true);
            //$('input[type="radio"]').prop('checked', false);
            $('input[type="radio"].addon.addon-radio').prop('checked', false);
        }
    });
});

Answer 1

Your page is producing the following error:

Uncaught TypeError: $ is not a function
(anonymous function) @ index:3

Most likely jQuery isn't loaded at all or you have code executing before it is loaded.