Пользовательский интерфейс ломается ⇐ Jquery

[Anonymous]

Я пытаюсь создать страницу в моем проекте Laravel с Tailwind CSS.
Что происходит, так это пользовательский интерфейс, кажется, сломается, как это



document.addEventListener("DOMContentLoaded", function () {
// Tabs functionality in Schedule page
const tabs = document.querySelectorAll(".tab-btn");
const contents = document.querySelectorAll(".tab-content");

const toggleTab = (activeTab, activeContent) => {
tabs.forEach((tab) =>
tab.classList.remove("bg-gray-200", "dark:bg-gray-700")
);
contents.forEach((content) => content.classList.add("hidden"));

activeTab.classList.add("bg-gray-200", "dark:bg-gray-700");
activeContent.classList.remove("hidden");
};

tabs.forEach((tab) => {
tab.addEventListener("click", () => {
const target =
tab.id === "pendingTab" ? "pendingContent" : "previousContent";
toggleTab(tab, document.getElementById(target));
});
});

// Set active tab based on URL
const urlParams = new URLSearchParams(window.location.search);
const activeTabParam = urlParams.get("tab") || "current";

const tabMap = {
current: {
tabBtn: document.getElementById("pendingTab"),
tabContent: document.getElementById("pendingContent"),
},
previous: {
tabBtn: document.getElementById("previousTab"),
tabContent: document.getElementById("previousContent"),
},
};

toggleTab(tabMap[activeTabParam].tabBtn, tabMap[activeTabParam].tabContent);

});

и мой client-list.blade.php

Код: Выделить всё

[list]
@forelse ($clients[$clientListKey] as $client)
[*]


{{ $client->name }}

{{ \Carbon\Carbon::parse($client->schedule)->format('d-M-Y h:i A') }}




@empty
[*]
You don't have any {{ $emptyMessage }} clients yet.

@endforelse
[/list]

{{ $clients[$clientListKey]
->appends(request()->except("{$clientListKey}_page"))
->appends([
"{$clientListKey}_page" => $clients[$clientListKey]->currentPage(),
'tab' => $clientListKey,
])
->links() }}

Я также не уверен, что контроллер делает какую -либо проблему здесь.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -is-broken