load data in custom dropdown using JavaScript, Ajax

Question

I am working on web application built on Spring Boot and using JavaScript as a frontend technology. So here I am facing a problem on my index page. There are dropdowns on which after clicking there are some options coming from API. The problem is, when my index page loads then if user clicks on dropdown to choose some category then data does not loaded. It is a custom dropdown.

This is an HTML of dropdown:

<div class="col-6">
    <label class="sr-only" for="inlineFormInputGroup" style="color: red;"> </label>
      <div class="custom-select-div">
        <select id="category" name="category">
            <option value='0'>Choose your category</option>
        </select>
    </div>
</div>

Below is my JavaScript code for custom dropdown:

<script>
    $(document).ready(function() {
        setTimeout(function(){
            getcategorylist();
        });
            
        setTimeout(function(){
            var x, i, j, l, ll, selElmnt, a, b, c;
            x = document.getElementsByClassName("custom-select-div");
            l = x.length;
            for (i = 0; i < l; i++) {
               selElmnt = x[i].getElementsByTagName("select")[0];
               ll = selElmnt.length;
                a = document.createElement("DIV");
                a.setAttribute("class", "select-selected");
                a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
                x[i].appendChild(a);
                b = document.createElement("DIV");
                b.setAttribute("class", "select-items select-hide");
                for (j = 1; j < ll; j++) {
                   c = document.createElement("DIV");
                   c.innerHTML = selElmnt.options[j].innerHTML;
                   c.addEventListener("click", function(e) {
                    var y, i, k, s, h, sl, yl;
                    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                    sl = s.length;
                    h = this.parentNode.previousSibling;
                    for (i = 0; i < sl; i++) {
                       if (s.options[i].innerHTML == this.innerHTML) {
                          s.selectedIndex = i;
                          h.innerHTML = this.innerHTML;
                          y = this.parentNode.getElementsByClassName("same-as-selected");
                          yl = y.length;
                          for (k = 0; k < yl; k++) {
                             y[k].removeAttribute("class");
                          }
                         this.setAttribute("class", "same-as-selected");
                        break;
                         }
                     }
                    h.click();
                  });
                  b.appendChild(c);
                }
                  x[i].appendChild(b);
                  a.addEventListener("click", function(e) {
                    e.stopPropagation();
                    closeAllSelect(this);
                    this.nextSibling.classList.toggle("select-hide");
                    this.classList.toggle("select-arrow-active");
                  });
                }

                function closeAllSelect(elmnt) {
                  var x, y, i, xl, yl, arrNo = [];
                  x = document.getElementsByClassName("select-items");
                  y = document.getElementsByClassName("select-selected");
                  xl = x.length;
                  yl = y.length;
                  for (i = 0; i < yl; i++) {
                    if (elmnt == y[i]) {
                      arrNo.push(i)
                    } else {
                      y[i].classList.remove("select-arrow-active");
                    }
                  }
                  for (i = 0; i < xl; i++) {
                    if (arrNo.indexOf(i)) {
                      x[i].classList.add("select-hide");
                    }
                  }
                }
                document.addEventListener("click", closeAllSelect);
            },500);
        });
        
        function getcategorylist(){ 
            var maincategory = document.getElementById('maincategory').value;
            $.post("<%=AkApiUrl.getcategorybymaincategory%>",{
                maincategory : maincategory,
            },
            function(data, status) {
                if (data.status == "OK") {
                    if (data.statusCode == 1) { 
                    debugger
                        var list = data.response;
                        var categorys='';
                        if(list.length > 0){
                            for (var i = 0; i < list.length; i++) {                             
                                var content = "<option value='"+list[i].categoryid+"'>"+list[i].name+"</option>";
                                categorys = categorys + content;
                            }
                        }
                        categorys = "<option value='0' style='display: none;'>Choose your category</option>"+categorys;
                        document.getElementById('category').innerHTML = categorys;
                    }else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            });
        }
        
        $("#searchBtn").click(function() {
            var maincategoryid = document.getElementById('maincategory').value;
            var latitude = document.getElementById("latitude").value;
            var longitude = document.getElementById("longitude").value;
            var location = document.getElementById("address").value;
            var categoryid = document.getElementById("category").value;
            var category = $("#category option:selected").text();
            
            var maincategory = "Truck-Trailer";             
            if(maincategoryid == '1'){
                maincategory = "Truck-Trailer";
            }else if(maincategoryid == '2'){
                maincategory = "Cars";
            }else if(maincategoryid == '3'){
                maincategory = "RV-Bus";
            }else {
                maincategory = "Truck-Trailer";
            }
            
            if (latitude == "" || latitude == null || longitude == "" || longitude == null || categoryid == 0) {
                if (latitude == "" || latitude == null || longitude == "" || longitude == null) {
                    $("#location").addClass("errorInput");
                    return false;
                } else {
                    $("#location").removeClass("errorInput");
                }
                
                if (categoryid == 0) {
                    $("#category").addClass("errorInput");
                    return false;
                } else {
                    $("#category").removeClass("errorInput");
                }
            }else{
                category = category.replaceAll(" & ", "-").replaceAll(" ", "-");
                location = location.replaceAll(", ", "-").replaceAll("&", "-").replaceAll(" ", "_");
                document.getElementById("listingForm").action = "<%=WebUrl.listing%>/"+maincategory+"/"+category+"/"+location;
                document.getElementById("listingForm").submit();
            }           
         });
    </script>

Data did not get loaded on first time when DOM loaded after refreshing page from 1-2 times then sometimes data get visible inside the dropdown. So what should I do?