<style>
        .hidden {
            display: none;
        }
        .button-container {
            margin-top: 10px;
        }
        .button-container button {
            margin: 5px;
            padding: 10px;
            cursor: pointer;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("صفحه کاملاً لود شده است.");

            // تابعی که تمام selectها را پیدا کرده و دکمه‌ها را ایجاد می‌کند
            function replaceSelectsWithButtons() {
                // پیدا کردن تمام selectهای داخل جدول variations
                const selectElements = document.querySelectorAll(".variations select");
                console.log("تعداد selectها پیدا شده:", selectElements.length);

                selectElements.forEach((selectElement) => {
                    // اگر select قبلاً پردازش شده باشد، از آن صرف‌نظر می‌کنیم
                    if (selectElement.classList.contains("processed")) {
                        console.log("این select قبلاً پردازش شده است.");
                        return;
                    }

                    console.log("در حال پردازش select:", selectElement);

                    const options = selectElement.querySelectorAll("option");
                    console.log("تعداد گزینه‌ها:", options.length);

                    // بررسی وجود گزینه‌ها
                    if (options.length > 1) {
                        console.log("گزینه‌ها وجود دارند.");

                        // مخفی کردن select
                        selectElement.classList.add("hidden");
                        console.log("عنصر select مخفی شد.");

                        // ایجاد دکمه‌ها برای هر گزینه
                        const buttonContainer = document.createElement("div");
                        buttonContainer.classList.add("button-container");
                        console.log("کنتینر دکمه‌ها ایجاد شد.");

                        options.forEach((option, index) => {
                            if (option.value) {
                                console.log(گزینه ${index + 1}:, option.textContent);

                                const button = document.createElement("button");
                                button.textContent = option.textContent;
                                button.addEventListener("click", function() {
                                    console.log(دکمه "${option.textContent}" کلیک شد.);
                                    selectElement.value = option.value;
                                    // اجرای رویداد change به صورت دستی
                                    const event = new Event('change', { bubbles: true });
                                    selectElement.dispatchEvent(event);
                                    console.log("رویداد change اجرا شد.");
                                });
                                buttonContainer.appendChild(button);
                                console.log(دکمه "${option.textContent}" اضافه شد.);
                            }
                        });

                        // اضافه کردن دکمه‌ها به صفحه
                        selectElement.parentNode.appendChild(buttonContainer);
                        console.log("دکمه‌ها به صفحه اضافه شدند.");

                        // علامت‌گذاری select به عنوان پردازش‌شده
                        selectElement.classList.add("processed");
                    } else {
                        console.log("هیچ گزینه‌ای وجود ندارد.");
                    }
                });
            }

            // اگر selectها از قبل وجود دارند، مستقیماً تابع را اجرا کنید
            replaceSelectsWithButtons();
            // اگر selectها به صورت دینامیک اضافه می‌شوند، از MutationObserver استفاده کنید
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'childList') {
                        console.log("تغییراتی در DOM رخ داده است.");
                        replaceSelectsWithButtons();
                    }
                });
            });

            // زیر نظر گرفتن تغییرات در کل body
            observer.observe(document.body, { childList: true, subtree: true });
        });
    </script>