Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kingsleyuchenna's avatar

Dynamic adding and removing inputs livewire 3

I have a code in which you can add multiple inputs by using the add button, and you can remove an input using the remove button. The issue I am having is that.

When I click the add it adds another input to an array, it misbehaves when I click the remove button.

Example: I click add 5 times I have 5 inputs, when I try removing 3 input fields two will remove the 3rd input will not react to the remove call. When I click on add again it will add the 3, I removed earlier. Sometimes after these processes, the two button stops functioning.

My Code

Class

public Collection $inputs;

public function mount () {
		$this->inputs = collect();
}

public function addInputs(): void
{
        $this->inputs->push(['name' => null]);
}

public function removeInputs($key): void
{
        $this->inputs->pull($key);
}

view

<div>
   @foreach($inputs as $key => $input)
        <div wire:key="input{{ $key }}">
             <input model="inputs.{{ $key }}.email" />
              <button wire:click="removeInputs({{ $key }})">delete </button>
       </div>
  @endforeach
</div>

<button wire:click="addInputs">add </button>
0 likes
6 replies
newbie360's avatar

@kingsleyuchenna Don't understand what this means

when I try removing 3 input fields two will remove the 3rd input will not react to the remove call

<div>
    @js($inputs->implode('name', ', '))

    @foreach($inputs as $key => $input)
         <div wire:key="input{{ $key }}">
            <input type="text" wire:model.live="inputs.{{ $key }}.name" />
            <button wire:click="removeInputs({{ $key }})">delete </button>
        </div>
   @endforeach

   <button wire:click="addInputs">add </button>
</div>

If not using Livewire v3, remove .live

kingsleyuchenna's avatar

@newbie360 what I meant was when I click the add button it adds an input field, if the input fields are more than 3 when I click the remove button on each input I can only remove one of the rest will not respond to the remove button click

Again after clicking the remove button to remove an input field when I click the add button it adds more than one.

kingsleyuchenna's avatar

@newbie360 Like I explained: when I click on add 3 times (I get 3 items in the array). Now I try deleting two of the input fields from the array I can't delete more than one. Let me say I clicked the last one the array remains 2 then I try deleting the 2nd one... It will not work.

When I click on add button it will add two input fields to the array

newbie360's avatar

@kingsleyuchenna I don't know if you can see the gif

https://ibb.co/JcnkMBk

<?php

namespace App\Livewire;

use Illuminate\Support\Collection;
use Illuminate\View\View;
use Livewire\Component;

class Test extends Component
{
    public Collection $inputs;

    public function mount ()
    {
        $this->inputs = collect();
    }

    public function addInputs(): void
    {
        $this->inputs->push(['name' => rand(1, 100)]);
    }

    public function removeInputs($key): void
    {
        $this->inputs->pull($key);
    }
}

<div class="p-10 space-y-4">
    <div>
        @js($inputs->implode('name', ', '))
    </div>

    @foreach($inputs as $key => $input)
         <div wire:key="input{{ $key }}">
            <input type="text" wire:model.live="inputs.{{ $key }}.name" />
            <button wire:click="removeInputs({{ $key }})">delete </button>
        </div>
   @endforeach

   <div>
       <button wire:click="addInputs">add </button>
   </div>
</div>
1 like

Please or to participate in this conversation.