всплывающее диалоговое окно с информацией о соответствующем продукте при наведении мыши

Question

плохо знаком с кодировкой, пожалуйста, помогите! При наведении указателя мыши на текст li (названия продуктов из файла json) появляется диалоговое окно с дополнительной информацией о том, что определенному продукту необходимо. Моя проблема в том, что независимо от того, какой li я наведите, в диалоговом окне всегда отображается информация только о первом продукте.

$(document).ready(function() {
  $("#dialog").dialog().parent().hide();
  $("#products").selectmenu({
    change: function() {
      getData();
    }
  });
});

function getData() {
  option = $("#products").val();
  $.ajax({
    url: "products.json",
    success: function(products) {
      display = "";
      for (var product in products) {
        if (products[product]["category"] == option) {
          $("#display-area").html(display += "<li>" + products[product]["name"] + "</li>");
          $("#display-area > li").mouseenter(function() {
            $.ajax({
              url: "products.json",
              success: function(products) {
                for (var product in products) {
                  if (products[product]["name"] == $("#display-area > li").html()) {
                    $("#dialog").html("Product ID: " + (products[product]["productId"]) + "<br>" + (products[product]["name"]));
                  }
                }
              }
            });
            $("#dialog").parent().show();
          }).mouseleave(function() {
            $("#dialog").parent().hide();
          });
        }
      }
    }
  });
}