I designed a comment section with a reply. I want a comment form to be created under the same comment when the user clicks on the reply button. I wrote this myself, but when I click on the reply button, the form is created only for the first comment.
function addtextbox() {
// Create a form dynamically.
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "submit.php");
// Create an input element for replyText.
var ID = document.createElement("input");
ID.setAttribute("type", "text");
ID.setAttribute("name", "body");
ID.setAttribute("placeholder", "Your Comment");
form.append(ID);
document.getElementsByClassName('formbox')[0].appendChild(form);
}<button onclick="addtextbox()">reply</button>
<div class="formbox"></div>there is a lot of way, but this is the simplest. good luck ;)
const replayButtons = document.querySelectorAll('.replay');
replayButtons.forEach(item => {
item.addEventListener('click', () => {
item.parentElement.insertAdjacentHTML('beforeend', `
<input type="text" placeholder="write your replay" />
`);
});
}) <div>
<h1>Post1</h1>
<p>Lorem ipsum dolor sit.</p>
<br>
<button class="replay">Replay</button>
<br>
</div>
<div>
<h1>Post2</h1>
<p>Lorem ipsum dolor sit.</p>
<br>
<button class="replay">Replay</button>
<br>
</div>
<div>
<h1>Post3</h1>
<p>Lorem ipsum dolor sit.</p>
<br>
<button class="replay">Replay</button>
<br>
</div>