I've dynamically loaded lots of pairs of elements onto my page. Each pair has a descriptor in a list, and a highlighter overlaid on an image.

What I want is when a user hovers over the list item, that the other element is highlighted.

My current code below only ever highlights the last element in the `.viewer`, no matter which list item I hover over.

What's the best approach for handling this?

```
for (i = 0; i < Ajax.length; ++i) {
    var listid = 'listitem-'+i;
    var mapid = 'mapitem-'+i;

    $('.list').append('<div id="'+listid+'">Lots of Text</div>');
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>');

    $('#'+listid).hover(function(){
        $('#'+mapid).toggleClass('highlight');
    });
}

```