Сделать появление блоков с удалением кнопки?

Question

[Andrej Sharapov]

Подскажите, в чем проблема.
Пытаюсь сделать появление скрытых блоков при нажатии на кнопку(т.е. пространство под ними должно остаться), при этом, сама кнопка должна тоже исчезать, а вместо нее вставать вторая, скрытая. Кнопка исчезает, а вот скрытые блоки не появляются.

.block {
    width: 100px;
    height: 100px;
    background: black;
    margin: 10px;
  }

  .n1 {
    visibility: hidden;
  }

<button class='opb'>open blocks</button>
<button class='n1 gen'>generate</button>

<div class='n1 block'></div>
<div class='n1 block'></div>
<div class='n1 block'></div>

Ставлю скрипт, но что-то работает не так:

var opb = document.querySelector('.opb');
opb.onclick = e => {
  e.target.parentNode.style.display = 'none';
  var n1 = document.querySelectorAll('.n1');
  n1.style.visibility = 'visible';
};
if (localStorage.getItem('an') == 1) opb.click();

Как это подправить?
Песочница https://jsfiddle.net/ygq9hjxb/9/