sending span text to a form via HTMX

[anjanesh]

I have something like this to display email ids, each in a pill format, with a cross in each pill to delete the email id from the list when required.

<div x-data="{contacts: contacts}">
    <template x-for="(item, index) in contacts" :key="item.pk">
        <span :id="'badge-dismiss-' + item.pk" class="inline-flex items-center px-2 py-1 me-2 text-xs font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300">
            <span x-text="item.fields.contact_email"></span>
            <button x-show="item.fields.is_primary == '0'" x-on:click="contacts.splice(index,1)" type="button" class="inline-flex items-center p-1 ms-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300" :data-dismiss-target="'#badge-dismiss-' + item.pk" aria-label="Remove">
                <svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
                <span class="sr-only">Remove badge</span>
            </button>
        </span>
    </template>
    <!-- <button type="button" x-on:click="console.log(contacts)">click</button> -->
</div>

I have this above code in a traditional form with name attributes which is getting sent via HTMX.

How do I include these email id pills in the form using name attributes ?
(Like as if adding name="to" to each span pill but name attribute is only possible in input elements)

[anjanesh]

I can only think of :

<span x-text="item.fields.contact_email"></span>
<input type="hidden" name="to" :value="item.fields.contact_email" />

[ekwoka]

that works, or have the buttons be checkboxes...

any kind of form element.