I’m using jQuery UI Autocomplete and trying to customize the display of the suggestions. I want to append a span with specific styling to each item, but it’s not working as expected. The span isn’t appearing in the rendered list items. Here is my code:

$(document).ready(function () {
    $("#inputSearchHome").autocomplete({
        source: "Website/SearchHomeATM",
        minLength: 3,
        select: function (event, ui) {
            if (ui.item) {
                var atmId = ui.item.id;
                var url = '@BaseUrl/AtmMgt/Detail?atmId=' + atmId;
                window.open(url, 'menubar=1, status=1, titlebar=1, toolbar=1');

                setTimeout(function () {
                    $("#inputSearchHome").autocomplete("close");
                    $("#inputSearchHome").val('');
                }, 100);

                return false;
            }
        }
    }).data('ui-autocomplete')._renderItem = function (ul, item) {
        var $div = $("<div>").html(item.label + " ");
        if (item.stateName !== "No State Info Available") {
            $("<span>")
                .css({
                    "background-color": item.color,
                    "color": "white",
                    "padding": "2px 5px",
                    "border-radius": "3px",
                    "margin-left": "10px"
                })
                .text(item.stateName)
                .appendTo($div);
        }
        return $("<li>").append($div).appendTo(ul);
    };
});

The response from the server is correct, and the label and stateName and color fields are populated correctly. However, the span element with the stateName and styling does not appear. How can I fix this to ensure the span is rendered correctly?