Cascading Dropdown Struggling Again

Okay I am probably the worlds worst developer for this I really wrestle with it and cant seem to get it right somehow.

I have a view.  The view includes an Unbound field called EqTypeID.  The reason it is unbound is at this stage the controller only has to provide the choice to the user and I don't need the data at all other than for limiting the products.  In my view I have:

<div class="form-group"><label class="col-md-2 control-label">Equipment Type</label><div class="col-md-10"><select  class="form-control" asp-items="ViewBag.EqTypeID" id="EqTypeId"><option>--- Select Equipment Type ---</option></select></div></div><div class="form-group"><label class="col-md-2 control-label">Product</label><div class="col-md-10"><select asp-for="ProductID" class="form-control" asp-items="ViewBag.ProductID" id="ProductID"><option>--- Select Product ---</option></select></div></div>

These both work fine on load being populated form the controller as:

 public IActionResult QuoteProduct(int id)
        {
            ViewData["EqTypeID"] = new SelectList(_context.EqTypes.OrderBy(e => e.EquipmentType), "EqTypeID", "EquipmentType");
            ViewData["ProductID"] = new SelectList(_context.Product.OrderBy(p=>p.ProductDescription).Take(12), "ProductID", "ProductDescription");
            ViewData["QuoteID"] = new SelectList(_context.Quote.Include(q => q.QuoteRequest).OrderBy(q => q.QuoteRequest.QDescription), "QuoteID", "QuoteRequest.QDescription", id);
            ViewData["IDD"] = id;
            return View();
        }

I am limiting product to the top 12 as there are some 20000 products and that takes a while to load even locally.

In controller I then have a Json code as follows:

public JsonResult GetProductsByCategoryId(int id)
        {
            List<Product> products = new List<Product>();
            if (id > 0)
            {
                products = _context.Product.Where(p => p.EqTypeID == id).ToList();

            }
            else
            {
                products.Insert(0, new Product { ProductID = 0, ProductDescription = "--Select Equipment Type First--" });
            }
            var result = (from r in products
                          select new
                          {
                              id = r.ProductID,
                              name = r.ProductDescription
                          }).ToList();

            return Json(result);
        }

As I read this, it takes a passed in id and tries to filter product to return products where the EQType is as passed in.  I don't see any errors here, and I don't think this is being called from the view.

Finally in my script section of the view I have:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script><script>
    var container = $("#QuoteSalesProduct");
            var refreshComponent = function () {$.get("/QuoteToProducts/GetMyViewComponent", { abcdef: $("quoteID").val() }, function (data) { container.html(data); });
            };$(function () {$("#buttonrefresh").click(function () {

                    window.setInterval(refreshComponent, 1000);})
            });
</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">    $(function () {        if ($("#EqTypeId").val() == '0') {            var productDefaultValue = "<option value='0'>--Select Equipment Type First--</option>";            $("#ProductId").html(productDefaultValue).show();        }         $("#EqTypeId").change(function () {            var selectedItemValue = $(this).val(); 
var ddlProducts = $("#ProductId");
alert('Here');            $.ajax({                cache: false,                type: "GET",                url: '@Url.Action("GetProductsByCategoryId", "QuoteToProducts")',                data: { "id": selectedItemValue },                success: function (data) {                    ddlProducts.html('');                    $.each(data, function (id, option) {                        ddlProducts.append($('<option></option>').val(option.id).html(option.name));                    });                },                error: function (xhr, ajaxOptions, thrownError) {                    alert('Found error to load product!!.');                }            });        });    });</script>

The questions I have are:

Do I need to have the two separate script references?  One to ajax etc and the other to code.jquery?

Is it okay to put these scripts into the view like this or am I better to have a separate js file?

As I read the code dealing with Products it takes a value from EqTypeId and alters the default for Products dropdown to read Select Equipment Type First.  Even this isn't firing so clearly I have an error?  Is my references correct?

Then on a change the EqTypeID new value is passed in as a selectedItemValue.  Fine as far as that goes, but why would the code then proceed to the section headed var ddlProducts?  It certainly isn't, as I popped an alert in to tell me and it isn't coming up.

I think the balance of the code looks correct, but wouldn't know as none of it is working for me.

Thanks for the help.  Sorry I really struggle in this area.