<form action="apply.html" method="post"> <div class="cloudinformation"> <h2> Job reference number: </h2> <h4> 1FN43 </h4> <input type="submit" value="Apply"> </div> </form> <form action="apply.html" method="post"> <div class="consultantinformation"> <h2> Job reference number: </h2> <h4> 6LZ9W </h4> <input type="submit" value="Apply"> </div> </form> <form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform"> <label>Job Reference Number:</label> <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required"> </form>¿Esto es lo que quieres lograr?
var applyBtn = document.querySelectorAll("button") var hideFormAll = document.querySelectorAll(".cloudinformation") for (let i = 0; i < applyBtn.length; i++) { applyBtn[i].addEventListener('click', function() { var referNumb = applyBtn[i].parentElement.querySelector(".refree") document.querySelector("#onlyletters").value = referNumb.textContent document.querySelector(".formAll").style.display = "none" document.querySelector("#regform").style.display = "block" }) } #regform { display: none; } <div class="formAll"> <div class="cloudinformation"> <h2> Job reference number: </h2> <h4 class="refree">1FN43</h4> <button>Apply</button> </div> <div class="consultantinformation"> <h2> Job reference number: </h2> <h4 class="refree">6LZ9W</h4> <button>Apply</button> </div> </div> <form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform"> <label>Job Reference Number:</label> <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required" readonly> <input type="submit" value="Submit"> </form>