JavaScript Callbacks Variable Scope Problem

A practice problem to my JavaScript Callbacks Variable Scope Problem Article on Pluralsight Tutorials.

by Itay Grudev

HTML

<p>When you click on a button below, a new entry should appear in the list below with a coresponding number.</p>

<p><b>For example:</b> Clicking on <b>A</b> should create an entry <b>1</b>, <b>B</b> should create an entry <b>2</b> and etc.</p>

<p>You should only edit the code withing the designated zone!</p>

<button>A</button>
<button>B</button>
<button>C</button>

<ul></ul>

CSS

button {
    margin: 10px;
    cursor: pointer;
}

JavaScript

$(document).ready( function() {
  var buttons = $('button');

  for( var i = 0; i < buttons.length; ++i ) {
    buttons.eq(i).click(
    	// ONLY EDIT THE CODE BELOW THIS LINE
    	function() {
      	$('ul').append('<li>' + i + '</li>')
    	}
    	// ONLY EDIT THE CODE ABOVE THIS LINE
    );
  }
});