Array with getElementById returning undefined

Question

I've got this working but crudely with manually repeating the code. But i'm trying to tidy it up a little with an array

var linkArr = ["twitter", "facebook", "instagram"];

for (var jj = 0; jj < linkArr.length; jj++) {
    
  document.getElementById(linkArr[jj]+'-button').addEventListener('mouseover', function(){
  var el = document.getElementById('parent');
  el.classList.add([linkArr[jj] + '-hover']);
  });

  document.getElementById(linkArr[jj]+'-button').addEventListener('mouseout', function(){
  var el = document.getElementById('parent');
  el.classList.remove(linkArr[jj] +'-hover');
  });
  
}

I just get an "undefined-hover" for the #parent element's class.

Help greatly appreciated.