Anonymous function inside loop, outputs only last value of the loop (i)

Question

I need to create a contextmenu (right click), inside this menu I want to display 3 color labels. When the user clicks a label, the div beneath the cursor changes its background color.

To achieve this I have declared a inner function, but this outputs only the last color, (last value of i).

How could I make the values of 'i' to persist inside the anonymous functions when the loop creates all function?

code:

for (var i = 0; i < items.length; i++) {                                
        menu.append(new gui.MenuItem({ 
            label: items[i].name,                
            click :  function(){
            //context.css({background: items[i].color});    
                console.log(i); // <-- I get 6 all the time when a label is clicked                                                 
            }
    }));
}