<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>Does this is what you want to achieve
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>