Code de ChatGPT no funciona en WordPress, y esta correcto

Le pedí a ChatGOT que hiciera el siguiente código para unos preguntas que quiero pone en un sitio web. El código funciona perfecto en JSfiddle.net y en WordPress no funciona la captura del numero del botón y el displáy en la tabla. Ya intente resolverlo y paree que es WordPress.

Interactive Quiz

Quiz Questions

        <div class="space-y-8">
            <!-- Question 1 -->
            <div class="question-container">
                <p class="text-lg mb-3">Q1: How much do you like me?</p>
                <div class="button-container">
                    <button onclick="selectAnswer(1, 1)" class="btn-number">1</button>
                    <button onclick="selectAnswer(1, 2)" class="btn-number">2</button>
                    <button onclick="selectAnswer(1, 3)" class="btn-number">3</button>
                    <button onclick="selectAnswer(1, 4)" class="btn-number">4</button>
                    <button onclick="selectAnswer(1, 5)" class="btn-number">5</button>
                    <button onclick="selectAnswer(1, 6)" class="btn-number">6</button>
                    <button onclick="selectAnswer(1, 7)" class="btn-number">7</button>
                    <button onclick="selectAnswer(1, 8)" class="btn-number">8</button>
                    <button onclick="selectAnswer(1, 9)" class="btn-number">9</button>
                    <button onclick="selectAnswer(1, 10)" class="btn-number">10</button>
                </div>
            </div>

            <!-- Question 2 -->
            <div class="question-container">
                <p class="text-lg mb-3">Q2: How much do you care?</p>
                <div class="button-container">
                    <button onclick="selectAnswer(2, 1)" class="btn-number">1</button>
                    <button onclick="selectAnswer(2, 2)" class="btn-number">2</button>
                    <button onclick="selectAnswer(2, 3)" class="btn-number">3</button>
                    <button onclick="selectAnswer(2, 4)" class="btn-number">4</button>
                    <button onclick="selectAnswer(2, 5)" class="btn-number">5</button>
                    <button onclick="selectAnswer(2, 6)" class="btn-number">6</button>
                    <button onclick="selectAnswer(2, 7)" class="btn-number">7</button>
                    <button onclick="selectAnswer(2, 8)" class="btn-number">8</button>
                    <button onclick="selectAnswer(2, 9)" class="btn-number">9</button>
                    <button onclick="selectAnswer(2, 10)" class="btn-number">10</button>
                </div>
            </div>

            <!-- Question 3 -->
            <div class="question-container">
                <p class="text-lg mb-3">Q3: How much is too much?</p>
                <div class="button-container">
                    <button onclick="selectAnswer(3, 1)" class="btn-number">1</button>
                    <button onclick="selectAnswer(3, 2)" class="btn-number">2</button>
                    <button onclick="selectAnswer(3, 3)" class="btn-number">3</button>
                    <button onclick="selectAnswer(3, 4)" class="btn-number">4</button>
                    <button onclick="selectAnswer(3, 5)" class="btn-number">5</button>
                    <button onclick="selectAnswer(3, 6)" class="btn-number">6</button>
                    <button onclick="selectAnswer(3, 7)" class="btn-number">7</button>
                    <button onclick="selectAnswer(3, 8)" class="btn-number">8</button>
                    <button onclick="selectAnswer(3, 9)" class="btn-number">9</button>
                    <button onclick="selectAnswer(3, 10)" class="btn-number">10</button>
                </div>
            </div>
        </div>

        <!-- Results Table -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-4">Results</h2>
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="border p-2 text-left">Question</th>
                        <th class="border p-2 text-left">Answer</th>
                    </tr>
                </thead>
                <tbody id="resultsTable">
                    <tr>
                        <td class="border p-2">Q1: How much do you like me?</td>
                        <td class="border p-2" id="answer1">Not answered yet</td>
                    </tr>
                    <tr>
                        <td class="border p-2">Q2: How much do you care?</td>
                        <td class="border p-2" id="answer2">Not answered yet</td>
                    </tr>
                    <tr>
                        <td class="border p-2">Q3: How much is too much?</td>
                        <td class="border p-2" id="answer3">Not answered yet</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    (function() {
        window.selectAnswer = function(questionNumber, value) {
            document.getElementById(answer${questionNumber}).textContent = value;

            const buttons = document.querySelectorAll(.question-container:nth-child(${questionNumber}) .btn-number);
            buttons.forEach((btn, index) => {
                if (index + 1 === value) {
                    btn.classList.add('btn-selected');
                } else {
                    btn.classList.remove('btn-selected');
                }
            });
        }
    })();
</script>