iOS Safari Autofill / autocomplete sections not working - html

Question

I have a web app with a form that allows a user to enter contact information for several of their friends. When a user attempts to use the "AutoFill Contact" option that pops up when one of the form fields has focus, the info from the selected contact is used in all fields on the page instead of limiting the autofill to just the group of fields that has focus at the time.
I've looked through the documentation I could find on the autofill feature, and it looks like applying an autocomplete value of "section-*" for each field grouping should be enough. I'm guessing what I'm trying to do simply isn't possible, but input from someone well-versed in autofill settings would be much appreciated!
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form>
<fieldset class="container">
<div class="row">
<h2>First Friend</h2>
</div>
<div class="row">
<div>
<label for="SendRequestTo1FirstName">First Name</label>
<input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1" />
</div>
<div>
<label for="SendRequestTo1LastName">Last Name</label>
<input type="text" id="SendRequestTo1LastName" name="SendRequestTo1LastName" maxlength="50" autocomplete="section-friend1" />
</div>
<div>
<label for="SendRequestTo1Phone">Phone Number</label>
<input type="tel" placeholder="[phone]" id="SendRequestTo1Phone" maxlength="20" autocomplete="section-friend1" />
</div>
</div>
</fieldset>
<hr>
<fieldset class="container">
<div class="row">
<h2>Second Friend</h2>
</div>
<div class="row">
<div>
<label for="SendRequestTo2FirstName">First Name</label>
<input type="text" id="SendRequestTo2FirstName" name="SendRequestTo2FirstName" maxlength="50" autocomplete="section-friend2" />
</div>
<div>
<label for="SendRequestTo2LastName">Last Name</label>
<input type="text" id="SendRequestTo2LastName" name="SendRequestTo2LastName" maxlength="50" autocomplete="section-friend2" />
</div>
<div>
<label for="SendRequestTo2Phone">Phone Number</label>
<input type="tel" placeholder="[phone]" id="SendRequestTo2Phone" maxlength="20" autocomplete="section-friend2" />
</div>
</div>
</fieldset>
</form>

Answer 1

It looks like you have part of how section-* works, you just need to include a token after your section identification.
For example section-friend1 given-name:
<label for="SendRequestTo1FirstName">First Name</label>
<input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1 given-name" />
Here is an example from the spec, with some examples and the available tokens. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
Update:
Safari Caveats
Safari is really terrible with autocomplete. There isn't any documentation around what it is looking for, and doesn't seem to use any of the autocomplete standards. It seems to use a mix of id attributes and name attributes, or looks at the <label> content for the input.
Here are the best resources I found around getting both desktop and iOS Safari to work:
Blog:
https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
Codepen:
https://codepen.io/grigs/pen/YqoyWv
Credit Card autofill:
https is required in order for autocomplete to work for credit cards. Self-signed certificates do not work for Safari iOS (includes ChromeiOS), but work on desktop.
Hope this helps!