How do I loop through elements and use the index number to present the relative array object properties?
<p>I have created an array object with some dummy properties, I have have also dynamically created some list items that I would like to attach a click handler to. When a list item is clicked I would like to present the appropriate data inside #container using the template Ive set up. Im assuming I can use the index from the for loop of dynamic list items and some how use this to show the correct object properties? If you could advise me where I have gone wrong with this that would be great, sorry but Ive lost my way a little with this.</p>

<pre><code>$(document).ready(function () {

    var data = [

    {
        name: 'kyle',
        age: 23,
        sex: 'male'
    }, {
        name: 'james',
        age: 19,
        sex: 'male'
    }, {
        name: 'catrina',
        age: 28,
        sex: 'female'
    }];

    var template = $('#template').html();

    // Links created dynamically
    for (var i = 0; i &lt; 3; i++) {
        var link = '&lt;li&gt;Link ' + i + '&lt;/li&gt;';
        $('#links').append(link);
    }

    // When li is clicked show related data properties, li[0] = data[0], li[1] = data[1] ...
    $('li', '#links').live('click', function (e) {
        $.each(data, function (index, value) {
            $('#container').append(data.name[i], data.age[i], data.sex[i]);
        });

        $('#container').html(data);
    });

});
</code></pre>

<p>Code can be found here <a href="http://jsbin.com/otirax/6/edit" rel="nofollow">http://jsbin.com/otirax/6/edit</a></p>
