Jquery: отображать поля выбора на основе значений

Question

Прежде всего, заранее спасибо за любую помощь, которую вы можете предоставить.

Я создаю веб-сайт для строительных курсов.

Я пытаюсь показать поля выбора на основе их значений.

здесь отлично работает на скрипке: https://jsfiddle.net/ajq28u67/

однако, когда я размещаю код на сайте, он не работает? Любые идеи? http://learnconstruction.co.uk

<script>
  $(document).ready(function() {
    $("#blueCard").hide();
    $("#blackCard").hide();
    $("#cardType").change(function() {
      $("#blueCard").hide();
      $("#blackCard").hide();
      if ($("#cardType").val() === "Blue CSCS Card") {
        $("#blueCard").show();
      } else if ($("#cardType").val() === "Black CSCS Card") {
        $("#blackCard").show();
      }
    });
  });
  </script>