I am having a bit of trouble, and i think my syntax and structure is correct but for some reason the function is failing.

products.php page

i have this function at the bottom of the page which takes the value of $child and adds it to the page, where it gets passed to the Javascript function get_child_options:

 jQuery(document).ready(function(){
      get_child_options(<?=$child;?>);
 });

The function get_child_options is added by my footer.php page

footer.php

function get_child_options(selected){
   if(typeof selected === 'undefined'){
       var selected = '';
   }
   var parentID = jQuery('#parent').val();
   $.ajax({
     url: '/admin/parsers/child_categories.php',
     type: 'POST',
     data: {parentID: parentID, selected: selected},
     success: function (data){
         jQuery('#child').html(data);
     },
     error: function(){alert("Something went wrong with the child options.")},
     });
  }
  jQuery('select[name="parent"]').change(get_child_options);

The error when i load products.php is get_child_options is not declared I have had a look online and via this forumn and i think the makeup of my function within my products.php page is correct, i just don't understand why its not recognising the function is declared within my footer.php and processing the function.

To add, i have tried this within the function on my products.php page but i got rid of the undefined error but the function didnt pass any data to my get_child_options function.

jQuery(document).ready(function(){
    function getchild(child){
        var child = <?=$child;?>
        get_child_options(child);
    }
});

If anyone can help, that would be great and i can't think of what i am doing wrong. TIA

I have reviewed How can I call PHP functions by JavaScript? and feel my situation is different to theres.