Question

I have multiple forms on a page.
I have created a button to hide and dislpay each form (which works).
I am trying to add the value from #family_name after the button to identify what the button is for.
However the value for the first #family name appears after each button on each form. I want the value associated with that particular form to appear.

(i know the button is getting put in a silly place…not a problem at this stage)

var family = $("input#family_name").val();
$("input#salutation").after("<button title=\"View, Amend or Add\" id=\"chnx\">+</button><span>" + family + "</span>");

<div id="1">
<form id="1">
<fieldset>
<p>
<label for="salutation">Salutation</label>
<input name="salutation" id="salutation" class="required" value="Mr" type="text">
</p>
<p>
<label for="family_name">Family Name</label>
<input name="family_name" id="family_name" class="required" value="Parker" type="text">
</p>
<p>
<label for="first_name">First Name</label>
<input name="first_name" id="first_name" class="required" value="" type="text">
</p>
<p>
<label for="middle_name">Middle Name</label>
<input name="middle_name" id="middle_name" class="required" value="" type="text">
</p>
<p>
<label for="DOB">Date of Birth</label>
<input name="DOB" id="DOB" class="required" value="" type="text">
</p>
<input value="Add" id="add" type="submit">
<input value="Amend" id="amend" type="submit">
</fieldset>
</form>
.......
<form id="2">
.......
.....mutliple forms......
.......
</div>

Answer 1

ID’s must be unique in a page so you can’t look for the first element with an ID.

WHat you ill need to do is change them to a class name ( as well as all other elements in each form that duplicate) and loop over each form to look only within that form for the data and to make the append.

Something like the following

$('form').each(function(){
    var family = $(this).find("input.family_name").val();
     $(this).find("input.salutation").after("<button title=\"View, Amend or Add\" id=\"chnx\">+</button><span>" + family + "</span>");

});

It would likely be best to also add a common class name to the forms in case you have any other type of form like a login that is not related to this manipulation