js script not working in Elementor. What's wrong with the code?

Question

JavaScript

The code works in a separate HTML (not on the site), but does not want to be friends with the site. Maybe you need to change something? But my level does not allow me to understand the essence of the problem.

spoiler

<script type="text/javascript">
    var i = 0;
    var answers = [
      "No",
      "Yes",
    ];

    $(function () {

      $('.panel-text').click(function () {
        i = Math.floor(Math.random() * answers.length)
        showText(this, answers[i]);
      }); ;

      function showText(panel, text) {

        var panel = $(panel);
        var msg = $('.message', panel);
        panel.fadeOut(500, function () {
          msg.html(text);
          panel.fadeIn(500);
        });
      }
    });
  
  </script>
    <div class="ball">
      <div class="panel-text">
        <div class="message">
            Click,<br>
            for answer
        </div>
      </div>
    </div>

Answer 1

The script worked when I added this code:

<!-- https://code.jquery.com/ -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
   crossorigin="anonymous"></script>

<!-- Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- microsoft.com -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

<!-- https://cdnjs.com/  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" 
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>