Javascript, созданный в PHP, не выполняется

Я пытаюсь создать систему рулетки, которая должна работать следующим образом: пользователь нажимает кнопку отправки, которая затем проверяется в файле open_case_handler.php, чтобы узнать, достаточно ли у пользователя средств на его счете или нет, и если он будет повторять код javascript, который создаст анимацию для рулетки, а также выдаст выигрыш. В целях безопасности я выполняю код js на php, поэтому у пользователя нет доступа к нему, поскольку он выполняется на стороне сервера.

Проблема здесь в том, что код js и jquery не выполняется после достижения этой строки кода:

var gw = $(".gift").outerWidth(true);

в open_case_handler.php.

Вы заметите, что есть два предупреждения до и после кода предыдущей строки, о котором я только что упомянул. Если я раскомментирую предупреждение («TEST1»), оно будет выполнено, и появится предупреждающее сообщение, однако остальная часть кода не будет выполнена. Также, если я раскомментирую только предупреждение («ТЕСТ2»), оно не будет выполнено и ничего не произойдет.

Чтобы убедиться, что код javascript действительно работает. Я ранее тестировал его в файле javascript и использовал его в файле index.php, и он работал отлично.

index.php

Эта страница содержит рулетку со всеми различными изображениями каждого предмета. Кнопка отправки находится внизу. Это кнопка, которую пользователи нажимают, чтобы запустить рулетку.

    <div class='rafflebox'>
      <div class='pointer'></div>
      <div class='boxwrapper'>
        <ul class='giftwrapper'>

          <div class = "gift item bg-size2 box-bg3">
              <img class = "item-product2" src = "graphics/mouse.png" draggable = "false">
          </div>

          <div class = "gift item bg-size2 box-bg2">
              <img class = "item-product2" src = "graphics/mouse.png" draggable = "false">
          </div>

          <div class = "gift item bg-size2 box-bg3">
              <img class = "item-product2" src = "graphics/mouse.png" draggable = "false">
          </div>

          <div class = "gift item bg-size2 box-bg4">
              <img class = "item-product2" src = "graphics/mouse.png" draggable = "false">
          </div>


        </ul>
      </div>
    </div>

    <form  method = "post">
      <button type = "submit" name = "opening_case" class = "btn open-box-btn btn-openbox-font button"><img id = "lock" src = "graphics/iconos/Candado Cerrado Black.png">ABRIR CAJA</button>
    </form>

  </div>

open_case_handler.php

<?php
session_start ();

if (isset($_POST['opening_case']))
{
 opening_case ();

} 

function opening_case ()

{

if ($_SESSION['balance'] >= $_SESSION['box price'])

  {
    echo '
    <script>
      //alert("TEST1");
      var giftamount = 10;
      var gw = $(".gift").outerWidth(true);
      //alert("TEST2");
      var giftcenter = gw/2;
      var cycle = 7;

      var containercenter = $(".boxwrapper").outerWidth(true)/2;
      for(var i = 0; i <=5; i++)
        {
          var giftduplicate = $(".giftwrapper").children().clone(true,true);
           $(".giftwrapper").append(giftduplicate);
        }

      $(".button").click(function()
      {
            alert("You DO have sufficient funds");
            var btn = $(this);
            btn.hide();
            var randomgift = Math.floor(Math.random() * 4) + 1;
            var dev = Math.random()*(giftcenter+1);
            var distance = giftamount *  cycle * gw   + (randomgift*gw) - containercenter -24 +dev;

            console.info(distance);

            $( ".giftwrapper" ).css({left: "0"});

            $(".giftwrapper").animate({left: "- = "+distance},10000,function()
              {
                alert("You Won Gift" + randomgift);
                btn.show();
              });

    });


    </script>';

   } else {

    //to be done

  }
}


?>

Пожалуйста, не стесняйтесь высказывать свои идеи о том, как лучше построить этот тип системы. Я открыт для всех предложений, я новичок в этом.

Спасибо!!