jQuery .each добавляет в div только последний элемент obj JS

Question

У меня есть несколько динамически созданных div, каждый из которых содержит заголовок.Нажатие на элемент div открывает модальное окно (которое очищается при нажатии), и заголовок также появляется в модальном режиме во второй раз.Я пытаюсь добавить описания категорий в модалы, но добавлен только последний элемент JS obj.Например, при нажатии на элемент «Животные» появляется модальное окно, и я должен увидеть описание «Животные ...».Нажатие на другой div должно загрузить модальное с другим описанием.

Я вижу все элементы в консоли, поэтому я не уверен, почему я сталкиваюсь с этой проблемой - я считаю,что-то отсутствует в $.each, но я не уверен, что.

Фрагмент JS:

// axios code here

loadCategories(){
        let categs = _categories

// down below I'm duplicating the template to create one div for each category
        let $host = $("#host");
            for (var i = 0; i < categs.length; i++) {
                let $template = $("#template").clone();

                $("#cat-title").empty();
                $("#cat-title").append(categs[i].Title);

                $("#cat-box-id").attr("data-category", categs[i].Title);

                $host.append($template.html());
                console.log('catdesc ' + categs[i].Description) // does show everything

            }

        $.each(categs, function(i, val) {
             $("#category-desc").empty();
             $("#category-desc").append(val.Description);
        })

Фрагмент HTML:

        <div class="modal-body">
          <div class="category-desc" id="category-desc"></div>
        </div>

Пример JS obj:

{
    "d": {
      "results": [
        {
          "Title": "Animals",
          "Description": "Animals are multicellular eukaryotic organisms that form the biological kingdom Animalia. With few exceptions, animals consume organic material, breathe oxygen, are able to move, can reproduce sexually, and grow from a hollow sphere of cells, the blastula, during embryonic development. Over 1.5 million living animal species have been described\u2014of which around 1 million are insects\u2014but it has been estimated there are over 7 million animal species in total.",
          "SortOrder": null
        },
        {
          "Title": "Colors",
          "Description": "Color (American English), or colour (Commonwealth English), is the characteristic of human visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple.",
          "SortOrder": null
        },
// other data
        {
          "Title": "World Capitals",
          "Description": "A capital city (or simply capital) is the municipality exercising primary status in a country, state, province, or other administrative region, usually as its seat of government.",
          "SortOrder": null
        }
      ]
    }
  }

Answer 1

Причина в том, что вы очищаете #category-desc перед добавлением нового значения, поэтому оно добавляет только последнее значение.

$.each(categs, function(i, val) {
  // $("#category-desc").empty();
  // ^ ^ don't empty content if you want value to be append 
  $("#category-desc").append(val.Description);
})