Livewire: Multiple root elements detected. This is not supported

Question

I want to make button when i press on it the number of item increase but it doesn't work because of this error

Livewire: Multiple root elements detected. This is not supported. See docs for more information https://laravel-livewire.com/docs/2.x/troubles

My route in php file

<div class="sb-input-number-frame">

   <a class="sb-input-number-btn sb-sub" href="#" wire:click.prevent="decreaseQuantity('{{$item->rowId}}')">-</a>
   <input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >
   <a class="sb-input-number-btn sb-add"  href="#" wire:click.prevent="increaseQuantity('{{ $item->rowId }}">+</a>

 </div>

My component code

 public function increaseQuantity($rowId)
{
    $product = Cart::instance('cart')->get($rowId);
    $qty = $product->qty + 1;
    Cart::instance('cart')->update($rowId, $qty);
    $this->emitTo('cart-count-component', 'refreshComponent');
}

Answer 1

The solution is to ensure that you only have one root HTML element, such as a . If you have multiple elements, then wrap everything in a or another element that suits your layout.

So in our example from above, we have wrapped everything in a which gets running:

   <div> 
<!-- Added this wrapping div -->
  <div class="sb-input-number-frame">

   <a class="sb-input-number-btn sb-sub" href="#" wire:click.prevent="decreaseQuantity('{{$item->rowId}}')">-</a>
   <input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >
   <a class="sb-input-number-btn sb-add"  href="#" wire:click.prevent="increaseQuantity('{{ $item->rowId }}">+</a>

 </div>
 <!-- Added this closing tag for the wrapping div -->
</div>