how can i replace form values with text using jquery and php

[luke noob]

index.php // php page

On my index.php i have many records... each record has a hidden form under it... for example...

 
// record...
 
<li class="record"> 
 
<p class="first_name">Luke</p>
 
<h3 class="Last_name">Jordan</h3>
 
// form...
 
<form action="getName.php" method="post">
 
<input type="hidden" value="" name="firstName" id="firstName">
 
<input type="hidden" value="" name="lastName" id="lastName">
 
<input type="button" value="View full name" name="getFullName">
 
</form>
</li>
 
// record...
 
<li class="record"> 
 
<p class="first_name">John</p>
 
<h3 class="Last_name">Smith</h3>
 
// form
 
<form action="getName.php" method="post">
 
<input type="hidden" value="" name="firstName" id="firstName">
 
<input type="hidden" value="" name="lastName" id="lastName">
 
<input type="button" value="View full name" name="getFullName">
 
</form>
</li>
 
 
 

myJquery.js // javascript/jquery page

I am trying to set the values in the forms to the names in the records above it, but with the code (jquery) that i have wrote... well it only seems to work for the first one.

 
        var firstName = $(".first_name").html();
        var lastName =  $(".Last_name").html();
 
 
        $("#firstName").val(firstName);
        $("#lastName").val(lastName);
 
 

All the records have the same classes as each other, and that cant be changed, i have been trying for ages now , please help me.

[Sudaraka]

You need to loop through each LI tag and assign values for each. Try this.

$('li.record').each(function(){
 
    $('#firstName', this).val($('.first_name', this).text());
    $('#lastName', this).val($('.Last_name', this).text());
 
});

Also, please note that having same ID for multiple elements is not DOM complaint. consider using class instead.