Combining Turbo Frames and Streams

create.blade.php

<x-app-layout title="New Invitations">
    <h1>New Invitations!</h1>

    <form action="{{ route('invitations.store') }}" method="POST">
        <div id="invitations"></div>

        <button type="submit">Invite</button>
    </form>

    <x-turbo-frame id="create_trigger_invitations">
        <x-turbo-stream target="invitations" action="append">
            @php $invitationIndex = request('invitation', 0); @endphp
            
            <div>
                <div>
                    <label for="invitations_{{ $invitationIndex }}_name">Name</label>
                    <input type="text" name="invitations[{{ $invitationIndex }}][name]" placeholder="Jane Doe" id="invitations_{{ $invitationIndex }}_name" />
                </div>
                
                <div>
                    <label for="invitations_{{ $invitationIndex }}_email">Email</label>
                    <input type="email" name="invitations[{{ $invitationIndex }}][email]" placeholder="jane.doe@example.com" id="invitations_{{ $invitationIndex }}_email" />
                </div>
                
                <br />
            </div>
        </x-turbo-stream>
        
        <a href="{{ route('invitations.create', ['invitation' => ++$invitationIndex]) }}">Add More</a>
    </x-turbo-frame>
</x-app-layout>