JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="w-nav-item level_1 has_sublevel">
        <a class="w-nav-anchor level_1" href="#">
            <span class="w-nav-icon"><i class="fa fa-files-o"></i></span>
            <span class="w-nav-title">Animals</span>
            <span class="w-nav-arrow"></span>
        </a>
        <!-- level 2 -->
        <ul class="w-nav-list level_2">
            <!---------------1 START animals with sublevel---------------->
            <li class="w-nav-item level_2 has_sublevel">
                <a class="w-nav-anchor level_2" href="javascript:void(0);">
                    <span class="w-nav-title">Birds </span>
                    <span class="w-nav-arrow"></span>
                </a>
                <!-- level 3 -->
                <ul class="w-nav-list level_3">
                </ul>
            </li>
        </ul>
    </li>
    <!---------------END animals with sublevel------------------>
</ul>

JavaScript

$(function() {
    
    var url = 'http://mcordoba.com/files/animals.xml';
    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + '&format=xml&callback=?';
    
    /*
    I used yql and $.getJSON to perform a cross-domain ajax request, but you can use $.get or $.ajax
   
    i.e:
    
    $.get('animals.xml', {}, function(data) { xml = $.parseXML(data); populateMenu(xml); });
    
    */
    
    $.getJSON(yql, function(data) {
        var xml = $.parseXML(data.results[0]);
        populateMenu(xml);
    });
    
    function populateMenu(xml) {
        xml_items = xml.getElementsByTagName('item');
        for(var i in xml_items) {
             var animal_id = xml_items[i].childNodes[1].innerHTML;
             var animal_title = xml_items[i].childNodes[3].innerHTML;
             var animal_generic = xml_items[i].childNodes[5].innerHTML;
             var animal_category = xml_items[i].childNodes[7].innerHTML;
             var animal_code = xml_items[i].childNodes[9].innerHTML;
             var animal_img = xml_items[i].childNodes[11].innerHTML;
             var animal_url = xml_items[i].childNodes[13].innerHTML;
             $('.w-nav-list.level_3').append('<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="'+animal_img+'"><span class="w-nav-title">'+animal_title+'</span><span class="w-nav-arrow"></span></a></li>');   
        }
    }
    
    
});