<fieldset class="fr-fieldset" id="firstname-disabled-4676" aria-labelledby="firstname-disabled-4676-legend firstname-disabled-4676-messages">
    <legend class="fr-sr-only" id="firstname-disabled-4676-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4678">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4678-messages" name="family-name" autocomplete="family-name" id="family-name-4678" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4678-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="given-4683">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-4683-messages" name="given-name" autocomplete="given-name" id="given-4683" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-4683-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-4676-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="firstname-disabled-4695" aria-labelledby="firstname-disabled-4695-legend firstname-disabled-4695-messages">
    <legend class="fr-sr-only" id="firstname-disabled-4695-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4697">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4697-messages" name="family-name" autocomplete="family-name" id="family-name-4697" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4697-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4703" disabled aria-labelledby="firstname-fieldset-4703-legend firstname-fieldset-4703-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4703-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4702">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4702-messages" name="given-name" autocomplete="given-name" id="given-4702" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4702-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4703-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4703');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-4704" type="checkbox" aria-describedby="disabler-4704-messages">
            <label class="fr-label" for="disabler-4704">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4704-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="firstname-disabled-4695-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="married-name-4714" aria-labelledby="married-name-4714-legend married-name-4714-messages">
    <legend class="fr-sr-only" id="married-name-4714-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4716">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4716-messages" name="family-name" autocomplete="family-name" id="family-name-4716" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4716-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="married-4719">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-4719-messages" name="married-name" autocomplete="family-name" id="married-4719" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-4719-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="given-4721">
                Prénom
            </label>
            <input class="fr-input" aria-describedby="given-4721-messages" name="given-name" autocomplete="given-name" id="given-4721" spellcheck="false" type="text">
            <div class="fr-messages-group" id="given-4721-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-name-4714-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="married-and-firstname-disabled-4733" aria-labelledby="married-and-firstname-disabled-4733-legend married-and-firstname-disabled-4733-messages">
    <legend class="fr-sr-only" id="married-and-firstname-disabled-4733-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4735">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4735-messages" name="family-name" autocomplete="family-name" id="family-name-4735" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4735-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="married-4738">
                Nom d'usage
                <span class="fr-hint-text">Ancien nom…</span>
            </label>
            <input class="fr-input" aria-describedby="married-4738-messages" name="married-name" autocomplete="family-name" id="married-4738" spellcheck="false" type="text">
            <div class="fr-messages-group" id="married-4738-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4741" disabled aria-labelledby="firstname-fieldset-4741-legend firstname-fieldset-4741-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4741-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4740">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4740-messages" name="given-name" autocomplete="given-name" id="given-4740" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4740-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4741-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4741');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-4742" type="checkbox" aria-describedby="disabler-4742-messages">
            <label class="fr-label" for="disabler-4742">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4742-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="married-and-firstname-disabled-4733-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="button-4754" aria-labelledby="button-4754-legend button-4754-messages">
    <legend class="fr-sr-only" id="button-4754-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4756">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4756-messages" name="family-name" autocomplete="family-name" id="family-name-4756" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4756-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4762" aria-labelledby="firstname-fieldset-4762-legend firstname-fieldset-4762-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4762-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4761">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4761-messages" name="given-name" autocomplete="given-name" id="given-4761" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4761-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--tertiary" onclick="if (this.firstnamesCount === undefined) this.firstnamesCount = 1;
else this.firstnamesCount++;

const getFieldsetElement = (node) => {
  const parent = node.parentNode;
  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
  return getFieldsetElement(parent);
};

const firstname = getFieldsetElement(document.getElementById('given-4761'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-4761/g, `given-4761-added-${this.firstnamesCount}`).replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`).replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4762-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4762');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-4763" type="checkbox" aria-describedby="disabler-4763-messages">
            <label class="fr-label" for="disabler-4763">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4763-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-4754-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="button-and-firstname-disabled-4775" aria-labelledby="button-and-firstname-disabled-4775-legend button-and-firstname-disabled-4775-messages">
    <legend class="fr-sr-only" id="button-and-firstname-disabled-4775-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4777">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4777-messages" name="family-name" autocomplete="family-name" id="family-name-4777" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4777-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4783" disabled aria-labelledby="firstname-fieldset-4783-legend firstname-fieldset-4783-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4783-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4782">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4782-messages" name="given-name" autocomplete="given-name" id="given-4782" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4782-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-fieldset__element">
                <button class="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left fr-btn--tertiary" onclick="if (this.firstnamesCount === undefined) this.firstnamesCount = 1;
else this.firstnamesCount++;

const getFieldsetElement = (node) => {
  const parent = node.parentNode;
  if (parent.className.indexOf('fr-fieldset__element') > -1) return parent;
  return getFieldsetElement(parent);
};

const firstname = getFieldsetElement(document.getElementById('given-4782'));

const reference = getFieldsetElement(this);

const copy = firstname.cloneNode(true);
copy.innerHTML = copy.innerHTML.replace(/given-4782/g, `given-4782-added-${this.firstnamesCount}`).replace('name=&quot;given-name&quot;', `name=&quot;additional-name-${this.firstnamesCount}&quot;`).replace('autocomplete=&quot;given-name&quot;', 'autocomplete=&quot;additional-name&quot;');
const container = reference.parentNode;
container.insertBefore(copy, reference);
" type="button">
                    Ajouter un prénom
                </button>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4783-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4783');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-4784" type="checkbox" aria-describedby="disabler-4784-messages">
            <label class="fr-label" for="disabler-4784">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4784-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="button-and-firstname-disabled-4775-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="name-international-4796" aria-labelledby="name-international-4796-legend name-international-4796-messages">
    <legend class="fr-sr-only" id="name-international-4796-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-4797">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-4797-messages" id="country-4797" name="country">
                <option value="" selected disabled hidden>Sélectionner une option</option>
                <option value="FR">France</option>
                <option value="DE">Allemagne</option>
                <option value="IT">Italie</option>
                <option value="ES">Espagne</option>
                <option value="GB">Royaume-Uni</option>
            </select>
            <div class="fr-messages-group" id="country-4797-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4798">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4798-messages" name="family-name" autocomplete="family-name" id="family-name-4798" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4798-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4804" aria-labelledby="firstname-fieldset-4804-legend firstname-fieldset-4804-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4804-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4803">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4803-messages" name="given-name" autocomplete="given-name" id="given-4803" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4803-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4804-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4804');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" name="firstname-disabled" id="disabler-4805" type="checkbox" aria-describedby="disabler-4805-messages">
            <label class="fr-label" for="disabler-4805">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4805-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-4796-messages" aria-live="assertive">
    </div>
</fieldset>

<fieldset class="fr-fieldset" id="name-international-4817" aria-labelledby="name-international-4817-legend name-international-4817-messages">
    <legend class="fr-sr-only" id="name-international-4817-legend">
        Nom
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-select-group">
            <label class="fr-label" for="country-4818">
                Pays
            </label>
            <select class="fr-select" aria-describedby="country-4818-messages" id="country-4818" name="country">
                <option value="" selected disabled hidden>Sélectionner une option</option>
                <option value="FR">France</option>
                <option value="DE">Allemagne</option>
                <option value="IT">Italie</option>
                <option value="ES">Espagne</option>
                <option value="GB">Royaume-Uni</option>
            </select>
            <div class="fr-messages-group" id="country-4818-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="family-name-4819">
                Nom
            </label>
            <input class="fr-input" aria-describedby="family-name-4819-messages" name="family-name" autocomplete="family-name" id="family-name-4819" spellcheck="false" type="text">
            <div class="fr-messages-group" id="family-name-4819-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <fieldset class="fr-mb-n4v fr-fieldset" id="firstname-fieldset-4825" disabled aria-labelledby="firstname-fieldset-4825-legend firstname-fieldset-4825-messages">
            <legend class="fr-sr-only" id="firstname-fieldset-4825-legend">
                Prénom(s)
            </legend>
            <div class="fr-fieldset__element">
                <div class="fr-input-group">
                    <label class="fr-label" for="given-4824">
                        Prénom
                    </label>
                    <input class="fr-input" aria-describedby="given-4824-messages" name="given-name" autocomplete="given-name" id="given-4824" spellcheck="false" type="text">
                    <div class="fr-messages-group" id="given-4824-messages" aria-live="assertive">
                    </div>
                </div>
            </div>
            <div class="fr-messages-group" id="firstname-fieldset-4825-messages" aria-live="assertive">
            </div>
        </fieldset>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-checkbox-group fr-checkbox-group--sm">
            <input onclick="const fieldset = document.getElementById('firstname-fieldset-4825');
if (this.checked) fieldset.setAttribute('disabled', '');
else fieldset.removeAttribute('disabled');
" checked name="firstname-disabled" id="disabler-4826" type="checkbox" aria-describedby="disabler-4826-messages">
            <label class="fr-label" for="disabler-4826">
                Je n'ai pas de prénom
            </label>
            <div class="fr-messages-group" id="disabler-4826-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="name-international-4817-messages" aria-live="assertive">
    </div>
</fieldset>