Как показать form при нажатии на кнопку с помощью javascript?

В общем, есть несколько одинаковых форм и кнопок под ними. Изначально формы скрыты:

<style>
.form111{
    display: none;
}
</style>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>

Нужно, чтобы при нажатии на кнопку открывалась форма, а кнопка пропадала.

Также есть код на js, который позволяет кнопке пропадать:

var button111 = document.querySelectorAll('.button111');
for(var i = 0; i < button111.length; i++){
    button111[i].onclick = function(){
        this.style.display = 'none';
    }
}

Но вот как открывать при этом форму, я не знаю.
Пробовал такой код, но открываются сразу все формы:

var form111 = document.querySelectorAll('.form111');
var button111 = document.querySelectorAll('.button111');
    for(var i = 0; i < button111.length; i++){
        button111[i].onclick = function(){
            this.style.display = 'none';
            for(var y = 0; y < form111.length; y++){
                form111[y].style.display = 'block';
        }
    }
}