Cannot set property 'innerHTML' of undefined

I've been trying to implement a modal on my site that dynamically loads the content using an ajax call.

I stumbled across this question, which showed this demo, which would suit my needs perfectly after a little modification.

The demo works perfectly on JSFiddle, but inside my dev environment is spitting out the error:

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

Tracing it back to my script it is saying that htmlData is undefined, but it is defined right above it?

Script that runs the call:

<script>
(function() {
    var infoModal = $('#myModal');
    $('.modal-toggle').on('click', function(){
        $.ajax({
            type: "GET",
            url: '/api/menu-item/'+$(this).data('id'),
            dataType: 'json',
            error: function(data){
                fakeResponse = {"id":4,"menu_category_id":446,"name":"kunzereichert","description":"Dolores impedit ut doloribus et a et aut.","price":"999.99","created_at":"2015-04-10 05:55:23","updated_at":"2015-04-10 05:55:23"}
;
                var htmlData = '<ul><li>';
                htmlData += fakeResponse.name;
                htmlData += '</li></ul>';
                infoModal.find('#modal-body')[0].innerHTML = htmlData;
            }
        });
    });
})(jQuery);
</script>

I'm not very fluent with javascript, so would appreciate any help with why I am getting this error. I am just trying to test loading some information from a JSON response to then display inside the modal.

If there is a better way to do this then I am open to suggestions to!

via Chebli Mohamed