//Create an empty array to hold mofidied data
let playerInfo = [];

function fullName(id, arr) {    
  
  //Create and append LI for Player Information column, then set #id attribute
    let playerFrstNm = document.createElement("LI");
    document.getElementById("firstName").appendChild(playerFrstNm);
    playerFrstNm.setAttribute("id", `playerFstNm${id}`);
    
    //Create and append LI for Player Information column, then set #id attribute
    let playerLstNm = document.createElement("LI");
    document.getElementById("lastName").appendChild(playerLstNm);
    playerLstNm.setAttribute("id", `playerLstNm${id}`);
    
    //Create and append LI for Player column, then set #id attribute
    let playerNumber = document.createElement("LI");
    document.getElementById("list").appendChild(playerNumber);
    playerNumber.setAttribute("id", `playerNum${id+1}`);
  
    let playerNum = document.createTextNode(`${id+1}.)`);
    playerNumber.appendChild(playerNum);
  
  //Return fullName item
  return playerInfo[id];
}

function playerHTML(){
  
}
//Provided array to iterate over, modify and add to new array
firstNames = ['Dennis', 'Deandra', 'Frank'];

//Use forEach method to iterate over and and create new array with modified data
firstNames.forEach(
  function(firstName, id, arr) {
    //Modify the name and add to the fullName array
    playerFull= `${firstName} Reynolds`;
    playerInfo.push(playerFull.split(" "));
    //Display the current item in the first name array
    let playerName = fullName(id, arr);
    
    //Create text node for player information item and comma
    document.getElementById(`playerFstNm${id}`).appendChild(document.createTextNode(`${playerName[0]}`));
    document.getElementById(`playerLstNm${id}`).appendChild(document.createTextNode(`${playerName[1]}`));
  },
playerInfo);