What's wrong in this code , code shows only catagory list but not hit to lode product function

<div class="container">
	<div class="master">
		<h4>Order Deails </h4>
		<table class="table table-responsive">
			<tr>
				<td>Order Number :</td>
				<td>
					<input type="text" id="Order No" class="form-control" />
					<span class="error">Order Number Requered </span>
				</td>
				<td>Order Date :</td>
				<td>
					<input type="text" id="OrderDate" class="form-control" />
					<span class="error"> Valide Order Date Requered (ex: MM/dd/yyyy) </span>
				</td>
			</tr>
			<tr>
				<td>Description</td>
				<td colspan="3">
					<textarea id="Description" class="form-control"></textarea>

				</td>
		</tr>
		</table>
	</div>
	<div class="Details">
		<h4>Order Items </h4>
		<table class="table table-responsive">
			<tr>
				<td>Category</td>
				<td>Product</td>
				<td>Qty</td>
				<td>Rate</td>
				<td> </td>
			</tr>
			<tr class="mycontainer" id="mainrow">
				<td>


					<select id="productCategory" class="pc form-control" onchange="LodeProduct(this)">
						<option>-Select-</option>
					</select>
					<span class="error">Select Category </span>
				</td>
				<td>
					<select id="product" class="product form-control">
						<option>-Select-</option>
					</select>
					<span class="error">Select Product </span>
				</td>
				<td>
					<input type="text" id="Quantity" class="Quantity form-control" />
					<span class="error">Enter Valid Quentity </span>
				</td>
				<td>
					<input type="text" id="Rate" class="Rate form-control" />
					<span class="error">Enter Valid Ratre </span>
				</td>
				<td>
					<input type="button" id="add" value="add" style="width:80px " class="btn btn-success" />
				</td>
			</tr>
		</table>
	</div>
	<div id="orderItems">
		<table class="table table-responsive " id="orderdetailsItems"></table>
		<span id="orderItems" style="color:red"></span>
	</div>
	<div style="padding:10px 0; text-align:right ">
		<input id="submit" type="button" value="Save Order" class="btn btn-warning" style="padding:10px 20px" />
	</div>
</div>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
@section Scripts{
	<script src="~/Scripts/bootstrap.min.js"></script>
	<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
	<script src="~/Scripts/MyScriptst.js"></script>
	<script>
		$(document).ready(function () {
			$("#OrderDate").datepicker({
				dateFormat: "dd-mm-yy"
			});
		})

	</script>
	<style>
		span.error {
			display: block;
			visibility: hidden;
			color: red;
			font-size: 90%;
		}
		tr.error {
			background-color: rgba(255,0,0,0.35);
		}
	</style>
}

public class MyHomeController : Controller
   {
       // GET: MyHome
       public ActionResult Index()
       {
           return View();
       }

       public JsonResult GetProductCategories()
       {
           List<Category> categories = new List<Category>();
           using (MydatabaseEntities dc = new MydatabaseEntities())
           {
               categories = dc.Categories.OrderBy(a => a.CategoryName).ToList();

           }
           return new JsonResult { Data = categories, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
           //return Json( categories, JsonRequestBehavior.AllowGet);

       }
       public JsonResult GetProducts(int categoryID)
       {
           List<Product> products = new List<Product>();
           using (MydatabaseEntities dc = new MydatabaseEntities())
           {
               products = dc.Products.Where(a => a.CategoryID.Equals(categoryID)).OrderBy(a => a.ProductName).ToList();
           }
           return new JsonResult { Data = products, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
       }
   }

var Categories = []

// fetching Database from table Categories
function LodeCategoty(element) {
   
    if (Categories.length == 0) {
        //ajax function to fetch data
        $.ajax({
            type: "Get",
            url: '/MyHome/GetProductCategories',
            success: function (data) {
                Categories = data;
                renderCategory(element);
            }
        })
    }
    else {
        //render Category to the element 
        renderCategory(element);
    }
}
function renderCategory(element) {
    var $ele = $(element);
    $ele.empty();
    $ele.append($('<option/>').val('0').text('select'));
    $.each(Categories, function (i, val) {
        $ele.append($('<option/>').val(val.CategoryID).text(val.CategoryName));
    });
}

function LodeProduct(CategoryDD) {
    $.ajax({

        type: "GET",
        url: "/MyHome/GetProducts",
        data: { 'CategoryID': (CategoryDD).val() },
        success: function (Data) {
            //render product to apropriat dropdown
            renderProduct($(CategoryID).parents('.mycontainer').find('select.product'), Data);
        },
        error: function (error) {
            Console.log(error);
        }
    })
}
function renderProduct(element, data) {
    var $ele = $(element);
    $ele.empty();
    $ele.append($('</option>').val('0').text('select'));
    $each(data, function (i, val) {
        $ele.append($('</option>').val(val.ProductID).text(val.ProductName));
    });
}

LodeCategoty($('#productCategory'));

namespace BillingDemo.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Category
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }
}

namespace BillingDemo.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Product
    {
        public int ProductID { get; set; }
        public int CategoryID { get; set; }
        public string ProductName { get; set; }
    }
}