Uncaught TypeError: jQuery(...).jqGrid is not a function

<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript">


    $(document).ready(function myfunction() {
       jQuery('#list').jqGrid({
           caption: "Employee Details",
           url: '@Url.Action("GetEmployee")',
           datatype: "json",
           contentType: "application/json; charset-utf-8",
           mtype: 'GET',
           colNames: ['Id' , 'First Name', 'Last Name', 'Email Id'],
           colModel: [
                 { name: 'Id', index: 'Id', width: 150 },
                 { name: 'First Name', index: 'FirstName', width: 150 },
                 { name: 'Last Name', index: 'LastName', width: 150 },
                 { name: 'Email', index: 'EmailId', width: 150 }
           ],
           rowNum: 10,
           loadonce: true

       });

       jQuery("#list").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });
   });
</script>    <script src="js/jqgrid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui/css/custom-theme/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/ui.jqgrid.css" />