JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Animals</h1>
<div id="menu"></div>

JavaScript

"use strict";

var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';

$(function () {

    var $menu = $('#menu');

    $.ajax({
        url: animalsXMLurl, // name of file you want to parse
        dataType: "xml",
        success: handleResponse,
        error: function () {
            console.log('Error: Animals info xml could not be loaded.');
        }
    });

    function handleResponse(xmlResponse) {
        var $data = parseResponse(xmlResponse);
        createMenu($data);
    }

    function parseResponse(xmlResponse) {
        return $("item", xmlResponse).map(function () {
            var $this = $(this);
            return {
                id: $this.find("animal_id").text(),
                title: $this.find("animal_title").text(),
                url: $this.find("animal_url").text(),
                category: $this.find("animal_category").text()
            };
        });
    }

    function createMenu($data) {
        var categories = {};
        $data.each(function (i, dataItem) {
            if (typeof categories[dataItem.category] === 'undefined') {
                categories[dataItem.category] = [];
            }
            categories[dataItem.category].push(dataItem);
        });
        $.each(categories, function (category, categoryItems) {
            var categoryItems = categories[category];
            $menu.append($('<h2>').text(category));
            $menu.append(createList(categoryItems));
        });
    }

    function createList(categoryItems) {
        var $list = $('<ul>');
        $.each(categoryItems, function (i, dataItem) {
            $list.append(createItem(dataItem));
        });
        return $list;
    }

    function createItem(dataItem) {
        return $('<li>').text(dataItem.title);
    }
});