Why is my code behaving this way? I sort of passed the challenge but curious

// function to print to the page
function print(message) {
  document.getElementById('output');
  output.innerHTML = message;
}

/* 
function that takes an array and goes through each item 
printing the object inside
*/
function printStudentRecords(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var key in arr) {
      html += '<h2>Student: ' + arr[i].name + '</h2>';
      html += '<p>Track: ' + arr[i].track + '</p>';
      html += '<p>Achievements: ' + arr[i].achievements + '</p>';
      html += '<p>Points: ' + arr[i].points + '</p><hr>';
    }
  }
  print(html);
}

var html = '';

// array of objects
var students = [
  {
    name: 'Joey',
    track: 'iOS Developer',
    achievements: 75,
    points: 2000
  },
  {
    name: 'Rassam',
    track: 'Web Design',
    achievements: 30,
    points: 700
  },
  {
    name: 'Melissa',
    track: 'Web Development',
    achievements: 78,
    points: 4938
  },
  {
    name: 'Linda',
    track: 'Web Design',
    achievements: 99,
    points: 5984
  },
  {
    name: 'Dave',
    track: 'Android Developer',
    achievements: 458,
    points: 58943
  }
];

printStudentRecords(students);