php - How do I dynamically call a component multiple times using Javascript in Laravel 9?

I'm trying to call a component in Laravel Blade

I need to call -

<x-layouts.input 
    name="quantity" 
    title="Quantity" 
    type="number" 
    id="quantity" 
    :value="old('quantity')" />

Component:

@props(['name','title'=>'','type','id','value'=>''])

<div class="form-group">
    <label for="{{ $id }}">{{ $title }}</label>
    <input type="{{ $type }}" name="{{ $name }}" value="{{ $value }}" {{ $attributes->merge(['class'=>'form-control'])}} id="{{ $id }}"> 
</div>

How do I call this component repeatedly by tapping a button?

Solution:

I found a way, This could work

const addNewBtn = document.querySelector(".addNewBtn");
const multipleEntry = document.querySelector("#multipleEntry");

addNewBtn.addEventListener("click", (e) => {
    const lastRow = multipleEntry.lastElementChild;

    let clone = lastRow.cloneNode(true);
    multipleEntry.appendChild(clone);
});