I have been able to create the buttons using the for loop, but on click on a button, it picks the last value in the list of arrays, Why?

//list of propertySidebarItem styles to use to create the buttons
for (var i = 0; i < propertySidebarItem.styles.length; i++) {
  //current property style to use
  var style = propertySidebarItem.styles[i];
  //create the button using the current style
  var btnElement = document.createElement('button');
  btnElement.className = 'btn ' + element.tagName + style.name;
  //on click of any button, display the button properties
  btnElement.onclick = function () {
    //at this stage i am getting the last value in the propertySidebarItem.styles array
    console.log(btnElement);
  };
}