Создание элементов DOM с другим текстом

Я пытаюсь динамически создавать элементы DOM, которые отображают каждое значение объекта для всех объектов в массиве.

Я использовал цикл for для создания элементов и пытался сопоставить итерации содержимого с итерациями массива, но это не сработало. Ниже приведен мой код (это упрощенная версия, чтобы код работал).

let divTwo = document.querySelector('.div-two');
let bigArray = [{
    first: 'Joe',
    location: 'Washington'
  },
  {
    first: 'Jon',
    location: 'Boston'
  },
  {
    first: 'Brian',
    location: 'New York'
  },
];
let smallArray = ['first', 'location'];

function addNames() {
  for (let i = 0; i < bigArray.length; i++) {
    for (let j = 0; j < smallArray.length; j++) {
      let newSpan = document.createElement('span');

      newSpan.id = 'spanny' + (j + 1);
      divTwo.appendChild(newSpan);
      document.getElementById('spanny1').textContent = bigArray[j].first;
      document.getElementById('spanny2').textContent = bigArray[j].location;

      // newSpan[0].textContent = bigArray[0].first;     *also doesn’t work*
      // newSpan[1].textContent = bigArray[0].location;  *also doesn’t work*
    }
  }
}

addNames();