Why if i have more than 1 form in the same page with the same input file ID it is take just the first ID? - ajax

Question

I have more than form in the same file like
<form name="myForm">
<input type="hidden" value="1" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="2" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="3" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="4" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
but when I click on any link it always take the first ID which is 1??

Answer 1

An ID needs to be unique to the page, as it is a key for that element.
Why not change id="lastphp" to class="lastphp" and pass the form to the function?
<form name="myForm">
<input type="hidden" value="1" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="2" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="3" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="4" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
And haddle it like this
function ajaxFunction(form) {
var lastphp = form.getElementsByClassName("lastphp")[0].value;
alert(lastphp);
}
This can be alot easier with a framework, like jQuery.