Two JS functions with Same name in single HTML

Looks like your issue rises from the fact that you have too many globals and that your code is not modular.

One solution would be to write your grid.js file in a way that's exposing a Grid component which can be instanciated and which encapsulates it's logic, so that the index.html page can create independent Grid component instances.

You can think of your grid or any UI component as re-usable components such as native <select> element.

What could you do with 2 select elements in the same page?

index.html

$(function () {
    var $select1 = $('#select-1'), //this could be staffGrid = new Grid('#staff-grid')
        $select2 = $('#select-2');

    //Make a parallel with the change event and your gridLoadComplete event.
    //gridLoadComplete should be fired by your grid component itself and your component
    //should allow to listen to those events.

    //It could be staffGrid.on('loadComplete', function () { staffGrid.getValue(); });
    $select1.change(function () {
        $select1.val(); //access select1 value
    });

    $select2.change(function () {
        $select2.val(); //access select2 value
    });
});

As you can see in the exemple above, we invoke the same val function to get the value, but against different instances which allows us to get the value we want without duplicating the val function's logic.

You should consider namespacing your javascript, such that each fragment has its own namespace. For example:

staffGrid.html would contain:

<script>
var staffGrid = {
    gridLoadComplete: function() {
        var data = getValue();
    },

    myOtherFunc: function() {
        //Do other stuff...
    }
};
</script>

Then in your index.html, you can call: staffGrid.gridLoadComplete(); and teacherGrid.gridLoadComplete();