asp.net core json and javascript not working properly

Question

I have four dropdownlists, for three of them data is provided by json. Two are working properly (first two) the other are not. I was looking for errors for couple of hours and I don't see it. I may be tired or I need more dioptries to my glasses :)

 

View

<div class="col-3">
                    <select id="HazClass" class="form-control border-danger" asp-items="@Model.HazardClasses" >
                        <option value="">--Select Hazard Class--</option>
                    </select>
                    <span asp-validation-for="PTWHazId.HazClass" class="text-danger"></span>
                    <input hidden asp-for="PTWHazId.HazClass" id="hazClass" />
                </div>

                <div class="col-3">
                    <select id="HazDetail" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdH", "HazDetail"))" >
                        <option value="">--Select Hazard Detail--</option>
                    </select>
                    <span asp-validation-for="PTWHazId.HazDetails" class="text-danger"></span>
                    <input hidden asp-for="PTWHazId.HazDetails" id="hazDetail" />
                </div>
                <div class="col-3">
                    <select id="ConClass" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdCC", "ConClass"))" >
                        <option value="">--Select Control Class--</option>
                    </select>
                    <span asp-validation-for="PTWHazId.ConClass" class="text-danger"></span>
                    <input hidden asp-for="PTWHazId.ConClass" id="conClass" />
                </div>
                <div class="col-3">
                    <select id="ConDetail" class="form-control border-danger" asp-items="@(new SelectList(string.Empty, "IdCC", "ConDetail"))" onchange="func4()">
                        <option value="">--Select Control Details--</option>
                    </select>
                    <span asp-validation-for="PTWHazId.ConDetail" class="text-danger"></span>
                    <input hidden asp-for="PTWHazId.ConDetail" id="conDetail" />
                </div>

json

 

HazardClasses = await _context.HazardClasses.Include(s => s.HazardSource).Where(s => s.HazardSource.OrgID == orgid && s.HazardSource.HazSource == "Process").Select(a =>
                                        new SelectListItem
                                        {
                                            Value = a.IdHC.ToString(),
                                            Text = a.HazClass
                                        }).ToListAsync();

.............
        //Hazard Identification dropdown lists

        public async Task<JsonResult> OnGetHazDetailAsync(string id)
        {
            var hazDetails = await _context.HazardDetails.Where(s => s.IdHC == id).ToListAsync();

            return new JsonResult(new SelectList(hazDetails, "IdH", "HazDetail"));
        }
        public async Task<JsonResult> OnGetControlClassAsync(string id)
        {
            var conClass = await _context.ControlClasses.Where(s => s.IdH == id).ToListAsync();

            return new JsonResult(new SelectList(conClass, "IdCC", "ConClass"));
        }
        public async Task<JsonResult> OnGetControlDetailAsync(string id)
        {
            var conDetails = await _context.ControlClasses.Where(s => s.ConClass == id).ToListAsync();

            return new JsonResult(new SelectList(conDetails, "IdCC", "ConDetail"));
        }

javascript

 

$(function () {
    $("#HazClass").on("change", function () {
        var categoryId = $(this).val();
        $("#HazDetail").empty();
        $("#HazDetail").append("<option value=''>--Select Hazard Detail--</option>");
        $.getJSON(`?handler=HazDetail&id=${categoryId}`, (data) => {
            $.each(data, function (i, item) {
                $("#HazDetail").append(`<option value="${item.value}">${item.text}</option>`);
            });
        });

        var data = $("#HazClass :selected").text();
        $("#hazClass").val(data);
    });
});
$(function () {
    $("#HazDetail").on("change", function () {
        var categoryId = $(this).val();
        $("#ConClass").empty();
        $("#ConClass").append("<option value=''>--Select Control Class--</option>");
        $.getJSON(`?handler=ControlClass&id=${categoryId}`, (data) => {
            $.each(data, function (i, item) {
                $("#ConClass").append(`<option value="${item.value}">${item.text}</option>`);
            });
        });

        var data = $("#HazDetail :selected").text();
        $("#hazDetail").val(data);
    });
});
$(function () {
    $("#ConClass").on("change", function () {
        var data = $("#ConClass :selected").text();
        var categoryId = data;
        $("#ConDetail").empty();
        $("#ConDetail").append("<option value=''>--Select Control Detail--</option>");
        $.getJSON(`?handler=ControlDetail&id=${categoryId}`, (data) => {
            $.each(data, function (i, item) {
                $("#ConDetail").append(`<option value="${item.value}">${item.text}</option>`);
            });
        });

        var data = $("#ConClass :selected").text();
        $("#conClass").val(data);
    });
});