duplicate till 5 more event click when calling a function inside directive looping blade (@for(), @foreach(), @forelse())

[muh-hizbe]

I use @click="editFaqs()" or x-on:click="editFaqs".
my js function

function handleFaqs() {
  return {
    editFaqs() {
      log('test');
    }
  }
}

it's showing test in 5 more

But, if I use x-for="" alpine for looping data it's working normally.

[calebporzio]

Can you provide a complete code example for others to copy and paste to reproduce?

[muh-hizbe]

<div class="pb-12" x-data="faqsHandle()" class="min-h-screen overflow-auto">
    <div class="p-5">

        @php
        $headers = ['No', 'Question', 'Answer', 'Created', 'Action'];
        $data = [
            ['lorem ipsum', 'dolor dolor', '05-05-2021'],
            ['lorem ipsum', 'dolor dolor', '05-05-2021'],
        ];
        @endphp

        <div id='recipients' class="mt-6 lg:mt-0 rounded shadow bg-white">
          <table id="data-faqs">
              <thead>
                <tr>
                    @forelse ($headers as $key => $header)
                        <th data-priority="{{ $key +1 }}">{{ $header }}</th>
                    @empty
                        <th data-priority="1" class="text-center">No Header</th>
                    @endforelse
                </tr>
            </thead>

            <tbody>

                @forelse ($faqses as $key => $data)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $data->question_name }}</td>
                        <td>{{ $data->answer }}</td>
                        <td>{{ $data->created_at }}</td>
                        <td>
                            <svg xmlns="http://www.w3.org/2000/svg" x-on:click="editFaqs({{ $data->id }})" class="h-5 w-5 m-2 cursor-pointer text-yellow-700 hover:opacity-25" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 m-2 cursor-pointer text-red-700 hover:opacity-25" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($headers) }}" class="text-center">No data</td>
                    </tr>
                @endforelse

              </tbody>
            </table>
          </div>

    </div>
</div>

<script>
    function faqsHandle() {
        return {
            editFaqs(id) {
                console.log(id);
                console.log("test");
            },
        }
    }
</script>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!--Datatables -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.22/b-1.6.4/b-flash-1.6.4/b-html5-1.6.4/b-print-1.6.4/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        let table = $('#data-faqs').DataTable({
            responsive: true,
            dom: 'Blfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ]
        }).columns.adjust().responsive.recalc();
    });
    $('table').ready(function () {
        $('table').wrap('<div class="overflow-x-auto w-full"></div>');
    });
</script>

result in console :

[calebporzio]

Thanks, however, this coffee snippet of not copy and pastable. Please strip Laravel out completely before posting