Callback function for roomRequest is creating empy list items in between the correct ones

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    var employees = JSON.parse(xhr.responseText);
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<employees.length; i += 1) {
      if (employees[i].inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employees[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('employeeList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/employees.json');
xhr.send();

var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function (){
  if(xhr2.readyState === 4 && xhr2.status === 200){
    var rooms = JSON.parse(xhr2.responseText);
    var ulList = '<ul class="rooms">';
    for (var i=0 ; i<rooms.length ; i ++){
      if (rooms[i].available === true){
        ulList += '<li class="empty">';
      } else {
        ulList += '<li class="full">';
      }
      ulList += rooms[i].room;
      ulList += '<li/>';
    }
    ulList += '</ul>'
    document.getElementById('roomList').innerHTML = ulList;
  }
};
xhr2.open('GET', '../data/rooms.json');
xhr2.send();