Javascript File Does Not Work

I created a page independent from the theme and added the php and js files of the pageto the theme folder, the php file works but the js file does not. Why could it be?

PHP File:

?php
  if (!is_user_logged_in()) {
    wp_redirect(esc_url(site_url('/')));
    exit;
  } else{ 
  get_header();
  get_sidebar( 'left' );
?
   div id=primary class=content-area region__col region__col--2
    main id=main class=site-main
        
      div class=create-prediction
        h2 class=headline headline--mediumGuess Now/h2
        input class=new-prediction-title placeholder=Title
        textarea class=new-prediction-body placeholder=Your guess here.../textarea
        span class=submit-predictionGuess/span
      /div
      ul class=min-list link-list id=prediction
          
?php 
          $userPredictions = new WP_Query(array(
            'post_type' = 'prediction',
            'posts_per_page' = -1,
            'author' = get_current_user_id()
          ));
          while($userPredictions-have_posts()) {
            $userPredictions-the_post(); ?
            li data-id=?php the_ID(); ?
              input class=prediction-title-field value=?php echo esc_attr(get_the_title()); ?
              span class=edit-predictioni class=fa fa-pencil /i Edit/span
              span class=delete-predictioni class=fa fa-trash-o /i Delete/span
              textarea class=prediction-body-field?php echo esc_html(get_the_content()); ?/textarea
              span class=update-prediction btn--blue btn--smalli class=fa fa-arrow-right/i Save/span
            /li
?php  
        }
?
      /ul 
    /main
   /div
    
?php 
  get_sidebar( 'right' );
  get_footer();
  }
?

Javascript File:

class prediction {
  constructor() {
    this.events()
  }

  events() {
    $(#prediction).on(click, .delete-prediction, this.deletePrediction)
    $(#prediction).on(click, .edit-prediction, this.editPrediction.bind(this))
    $(#prediction).on(click, .update-prediction, this.updatePrediction.bind(this))
    $(.submit-prediction).on(click, this.createPrediction.bind(this))
  }

  editPrediction(e) {
    var thisPrediction = $(e.target).parents(li)
    if (thisPrediction.data(state) == editable) {
      this.makeNoteReadOnly(thisPrediction)
    } else {
      this.makeNoteEditable(thisPrediction)
    }
  }

  makeNoteEditable(thisPrediction) {
    thisPrediction.find(.edit-prediction).html('i class=fa fa-times aria-hidden=true/i Cancel')
    thisPrediction.find(.prediction-title-field, .prediction-body-field).removeAttr(readonly).addClass(prediction-active-field)
    thisPrediction.find(.update-prediction).addClass(update-prediction--visible)
    thisPrediction.data(state, editable)
  }

  makeNoteReadOnly(thisPrediction) {
    thisPrediction.find(.edit-prediction).html('i class=fa fa-pencil aria-hidden=true/i Edit')
    thisPrediction.find(.prediction-title-field, .prediction-body-field).attr(readonly, readonly).removeClass(prediction-active-field)
    thisPrediction.find(.update-prediction).removeClass(update-prediction--visible)
    thisPrediction.data(state, cancel)
  }

  deletePrediction(e) {
    var thisPrediction = $(e.target).parents(li)

    $.ajax({
      beforeSend: xhr = {
        xhr.setRequestHeader(X-WP-Nonce, prediction.nonce)
      },
      url: https://woouv.com/wp-json/wp/v2/prediction/ + thisPrediction.data(id),
      type: DELETE,
      success: response = {
        thisNote.slideUp()
        console.log(Congrats)
        console.log(response)
        if (response.userNoteCount  5) {
          $(.prediction-limit-message).removeClass(active)
        }
      },
      error: response = {    
        console.log(Sorry)
        console.log(response)
      }
    })
  }

  updatePrediction(e) {
    var thisPrediction = $(e.target).parents(li)

    var ourUpdatedPost = {
      title: thisPrediction.find(.prediction-title-field).val(),
      content: thisPrediction.find(.prediction-body-field).val()
    }

    $.ajax({
      beforeSend: xhr = {
        xhr.setRequestHeader(X-WP-Nonce, prediction.nonce)
      },
      url: https://woouv.com/wp-json/wp/v2/prediction/ + thisPrediction.data(id),
      type: POST,
      data: ourUpdatedPost,
      success: response = {
        this.makeNoteReadOnly(thisPrediction)
        console.log(Congrats)
        console.log(response)
      },
      error: response = {
        console.log(Sorry)
        console.log(response)
      }
    })
  }

  createPrediction(e) {
    var ourNewPost = {
      title: $(.new-prediction-title).val(),
      content: $(.new-prediction-body).val(),
      status: publish
    }

    $.ajax({
      beforeSend: xhr = {
        xhr.setRequestHeader(X-WP-Nonce, prediction.nonce)
      },
      url: https://woouv.com/wp-json/wp/v2/prediction/,
      type: POST,
      data: ourNewPost,
      success: response = {
        $(.new-prediction-title, .new-prediction-body).val()
        console.log(Congrats)
        console.log(response)
      },
      error: response = {
        if (response.responseText == You have reached your prediction limit.) {
          $(.prediction-limit-message).addClass(active)
        }
        console.log(Sorry)
        console.log(response)
      }
    })
  }
}

exports = {prediction}

I added enqueue script in functions.php file.

function predictionjs() { wp_enqueue_script( 'prediction', get_template_directory_uri() . '/assets/js/libs/prediction.js', array( 'jquery' ), '3.6.0', true ); } add_action( 'wp_enqueue_scripts', 'predictionjs');