hey guys, can i get some help to understand this. I want when someone enters a number, that inputs appear and the data from those would go into a new object that i can push to supabase for example

let num = 0;
let totalAttendees = [];
let attendee = {
        id: 1,
        first: '',
        age: undefined
    };
function addPerson() {
        total = [...total, attendee];
    }

const add = async (totalAttendees) => {         
try {  const { error } = await supabase.from('name').upsert(totalAttendees);             
if (error) throw error;
} catch (e) { 
console.log(e.message);         
} finally {
 console.log('success');        
 }    
};

this is the input to select how much forms should appear

<input type="number" class="bg-transparent" bind:value={num} />

this is me iterating

{#each Array(num) as _, i}
    <div>
        <input type="text" bind:value={attendee.first} class="bg-transparent" placeholder="first" />
        <input type="number" bind:value={attendee.age} class="bg-transparent" placeholder="age" />
        <button type="button" on:click={addPerson}>add</button>
    </div>
{/each}

it works, however the problem im getting is that when i enter info in any field its updating in all, is there anyway where each div inputs will be unique so it wont update

Hello @Ape R Us! This thread has been automatically created from your message in #843999948717555735 a ``few seconds ago``. Pinging @User so that they see this as well! Want to unsubscribe from this thread? Right-click the thread in Discord (or use the ... menu) and select Leave Thread to unsubscribe from future updates. Want to change the title? Use the

/title

command! We have solved your problem? Click the button below to archive it.

pretty much how to do this with sveltekit https://www.formget.com/create-multiple-form-fields-based-on-selection-jquery/