I have dynamically loaded some li inside a div by ajax call in jQuery. I have coded the function to iterate through these li elements on up and down arrow key.

But I found a weird behavior of focus. When these elements are focused on Tab press, they have border around them, but when these elements are focused by down arrow(function I wrote), it is not having border.

Here is the code of function

    if (e.keyCode === 40 && elemID.includes("resultstagsid.")) {
                e.preventDefault();
                //$('#results a').eq(liIndex).removeClass("bg-gray")
                liIndex++
    // $('#results a').eq(liIndex).focus().addClass("bg-gray")
                $('#results a').eq(liIndex).focus()
    
                let scrollTo = $('#results a').eq(liIndex);
                let position = scrollTo.offset().top
                    - container.offset().top
                    + container.scrollTop();
    
                container.animate({
                    scrollTop: position
                });
            }

//Here is the code where li elements are being generated.

const result = $('#results');    
var html = "<ul>"
        for (var i = 0; i < results.length; i++) {
            let valu = fuzzysort.highlight(results[i]);
            html += "<li><a href='#' id='resultstagsid." + i + "' name='resultstagsid." + i + "' onclick='selectService(\"" + valu + "\"); ' class='resultsatags'>" + fuzzysort.highlight(results[i]) + "</a></li>"
        }
        html += "</ul>" 
    result.html(html)

Note : I am using Admin LTE template. I have also checked for the class if assigned for focused element. But couldn't find. I am trying to style the elements differently and removing border anyway, but I am curious about this behavior even I may be doing some mistake possibly, so please if anyone can explain this.

Here is the screenshot for both behavior