Dynamic input fields with Alpine.js

dynamic_input_fields.html

<div x-data="{ bankAccounts: [{
   id: '',
   accountNumber: ''
   }] }">
   <template x-for="(bankAccount, index, bankAccounts) in bankAccounts" :key="index">
      <div class="grid grid-cols-6 gap-6 mt-2">
         <div class="col-span-3 md:col-span-3 sm:col-span-2">
            <x-jet-label for="city">Bank</x-jet-label>
            <select :name="`bank_info[${index}][bank_id]`" id="bank"
               class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full">
               <option value="">Select a Bank</option>
               @foreach ($banks as $bank)
               <option value="{{ $bank->id }}">{{ $bank->name }}</option>
               @endforeach
            </select>
         </div>
         <div class="col-span-2 md:col-span-2 sm:col-span-2">
            <x-jet-label for="account_number" value="{{ __('Account Number') }}" />
            <x-jet-input id="account_number" type="text" class="mt-1 block w-full"
               x-bind:name="`bank_info[${index}][account_number]`"
               placeholder="e.g. 09190838338" />
         </div>
         <div class="col-span-1">
            <div class="flex justify-between h-5/6 items-end">
               <button type="button" class="underline" @click="bankAccounts.push({
                  id: '',
                  accountNumber: ''
                  })">Add</button>
               <template x-if="index > 0">
                  <button type="button" class="underline"
                     @click="bankAccounts.splice(index, 1)">Remove</button>
               </template>
            </div>
         </div>
      </div>
   </template>
</div>