Update meerdere records met 1 AJAX call

Een pagina maken waarop je de data ophaalt uit de database. Deze encode je naar JSON.
Dan gebruik je een ajax call om de data op te halen en lees je de json uit en update je elk veld.
Er zijn meerdere voorbeelden te vinden.

Gebruik dan ook unieke waardes in je name-attribuut. En bij voorkeur in een array-notatie:
person[2]['firstname']

Dat wat Ariën zegt is stap één want zoals jij het weergeeft in je voorbeeld zal alleen de laatste van de vier doorkomen naar PHP omdat je telkens het name attribuut hergebruikt. Ga dus beginnen met de array notatie en gebruik een print_r om te zien hoe je data binnenkomt:
<?php
echo '<pre>' . print_r($_POST, true) . '</pre>';
?>
Als dat goed gaat kun je een simpele foreach gebruiken om ze alle vier één voor één te doorlopen:
<?php
foreach($_POST['person'] as $person) {
echo '<pre>' . print_r($person, true) . '</pre>';
}
?>
Overigens is de 2 in person[2]['firstname'] dus de teller. de eerste van de vier wordt 1, de tweede 2 etc.

[size=xsmall]Toevoeging op 09/03/2020 18:50:44:[/size]

Dus in je HTML komt het er zo uit te zien:

<form>
    <div class="group">
        <input name="person[1][firstname]" id="firstname1"/>
        <input name="person[1][lastname]" id="lastname1"/>
        <input name="person[1][email]" id="email1"/>
    </div>
    <div class="group">
        <input name="person[2][firstname]" id="firstname2"/>
        <input name="person[2][lastname]" id="lastname2"/>
        <input name="person[2][email]" id="email2"/>
    </div>
    <div class="group">
        <input name="person[3][firstname]" id="firstname3"/>
        <input name="person[3][lastname]" id="lastname3"/>
        <input name="person[3][email]" id="email3"/>
    </div>
    <div class="group">
        <input name="person[4][firstname]" id="firstname4"/>
        <input name="person[4][lastname]" id="lastname4"/>
        <input name="person[4][email]" id="email4"/>
    </div>
</form>

Je kunt de inputvelden ook door javascript laten creëren, mochten het er ooit 5 worden, hoef je niks aan te passen.

$(function() {
	function update() {
		$.ajax({
			dataType: "json",
			url: "ajax_request.php",
		})
		.done(function(data) {
			$.each(data, function(i, item) {
				var j = i+1; // Omdat je veld id met 1 begint en een array met 0
				$('#firstname' + j).val(item.firstname);
				$('#lastname' + j).val(item.lastname);
				$('#email' + j).val(item.emailaddress);
			});
		});
	}
	update();
});

Wat als je tussendoor ook velden kunt verwijderen? Dan heb je geen sluitende rij meer en weet je dus niet welk(e) nummer(s) er tussenuit was (waren) gevallen. Zolang je maar sets toevoegt en verwijdert hoef je geen volgnummer te gebruiken.

Precies, dus dan zou je het zo kunnen doen

<form>
</form>
<script>
$(function() {
	function update() {
		$.ajax({
			dataType: "json",
			url: "ajax_request.php",
		})
		.done(function(data) {
			$.each(data, function(i, item) {
				$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');

				$('#person_' + i + '_firstname').val(item.firstname);
				$('#person_' + i + '_lastname').val(item.lastname);
				$('#person_' + i + '_email').val(item.emailaddress);
			});
		});
	}
	update();
});
</script>

[size=xsmall]Toevoeging op 09/03/2020 20:55:30:[/size]

Even als toevoeging, als je dus de data wilt bijwerken zul je de data van het formulier weer terug moeten sturen.

$(function() {
	$("form").submit(function (e) {
		e.preventDefault();
		$.ajax({
			url: "ajax_request.php",
			type: "POST",
			data: $('form').serialize()
		})
		.done(function(data) {
			console.log(data);
		});
	});
	function update() {
		$.ajax({
			dataType: "json",
			url: "ajax_request.php",
		})
		.done(function(data) {
			console.log(data);
			$.each(data, function(i, item) {
				$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');

				$('#person_' + i + '_firstname').val(item.firstname);
				$('#person_' + i + '_lastname').val(item.lastname);
				$('#person_' + i + '_email').val(item.emailaddress);
			});
		})
		.fail(function() {
			console.log('Er is een fout opgetreden');
		})
		.always(function() {
			$('form').append('<button>Save</button>');
		});
	}
	update();
});