Show data name when confirm delete sweetalert

Question

I tried to customize confirm delete with sweetalert, but i have this issue when try to show the deleted data name

This is the delete form:

    <button type="submit" onclick="deleteCategory('{{ $categories->id }}')" class="dropdown-item text-danger" href="#">
      <i class='bx bxs-trash-alt' ></i> Delete</button>
         <form action="{{ route('categories.destroy', $categories->id) }}" method="post"
             id="DeleteCategory{{ $categories->id }}">
             @csrf
             @method('delete')
         </form>

here's my code:

<script>
        function deleteCategory(id) {
            var name = $(this).data("name");
            var content = document.createElement('div');
            content.innerHTML = 'Menghapus kategori <strong>'+ name + '</strong> akan menghapus seluruh kategori didalamnya.';
            Swal.fire({
                title: 'Apakah kamu yakin?',
                html: content,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yakin, hapus kategori',
                cancelButtonText: 'Batalkan'
            })
            .then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: "Sedang menghapus Layanan",
                        showConfirmButton: false,
                        timer: 2300,
                        timerProgressBar: true,
                        onOpen: () => {
                            document.getElementById(`DeleteService${id}`).submit();
                            Swal.fire(
                            'Terhapus!',
                            'Category berhasil dihapus',
                            'success'
                            )
                        }
                    });
                }
            })
        }
    </script>

but it's always undefined like this:

the delete function is work fine, but my issue is only the undefined thing

Answer 1

By assuming $categories->name holds category name.

<button type="submit" onclick= "deleteCategory('{{$categories->id}}','{{$categories->name}}')" class="dropdown-item text-danger" href="#">
//
</button>

function deleteCategory(id, name) {
//
}

Or

<button type="submit" onclick="deleteCategory(this)" data-id="{{$categories->id}}" data-name="{{$categories->name}}" class="dropdown-item text-danger" href="#">
//
</button>

function deleteCategory(self) {
    var id = self.getAttribute("data-id");
    var name = self.getAttribute("data-name");
}