In general, there are several identical shapes and buttons below them. Initially forms are hidden:

<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>

It is necessary that when you click on the button, the form opens, and the button disappears.

There is also a js code that allows the button to disappear:

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

But I don’t know how to open a form.
I tried this code, but all forms open at once:

 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'; } } }

    1 answer 1

     var button111 = document.querySelectorAll('.button111'); for(var i = 0; i < button111.length; i++){ button111[i].onclick = function(){ var form = this.parentElement.getElementsByClassName('form111')[0]; form.style.display = 'block'; this.style.display = 'none'; } } 
     .form111{ display: none; } 
     <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>