Why is my click function variable updating after its been assigned to the dom element? jQuery

Question

I'm trying to assign a click function to a list of links. I want the function for each element to be unique. Using a for loop I incriment on i, and use that in the function.

The result however, has every element using the last version of 'i'

Here's the code.

(function(){
    var d = dash_bar_rev_by_commodity;
    var vals = d.data()[0].values;
    var list = $('ul.hidden-links');
    for (var i=0;i<vals.length;i++)
    {
        list.append('<li><a href="#">Filter by '+vals[i].x+'</a></li>')
        $('ul.hidden-links li:last-child a').click(function(){
            $('.bar:eq('+i+')')[0].__onclick();
        });
    }
})();