jQuery will not work when added into WordPress site

Question

I have the following jQuery code:

$('#found-result').hide();
$('#found-no-result').hide();
$('.colors-li').hide();
$('#search-mod').click(function(){
  var searchCriteria = $('#search-criteria').val().toUpperCase();
  var isFound = false; // Display "Success or Failure"
  $('.colors-list').each(function(){
     var tagA = $(this).find('.colors-li-a')[0];
     var Value = $(tagA).text().toUpperCase();
     var isMached = Value == searchCriteria || searchCriteria == "";
     $(this).toggle(isMached);
     
     
     if(isMached) isFound = true; // Display "Success or Failure"
  }); 

   $("#result-success").html(isFound ? $("#found-result").show() : $("#found-no-result").show()); 
  
});

It goes on a WordPress page along with a search box made with HTML, it allows a user to search for a colour and responds with if the colour is available.

I have tried to add the script to the site by adding this into my functions.php

function jquery_load_scripts() {
    wp_enqueue_script( 'jquery' );

    wp_register_script( 'color-check', '/js/colorcheck.js');
    wp_enqueue_script( 'color-check' );
    
}    
add_action('wp_enqueue_scripts', 'jquery_load_scripts');

If I go onto the page where it is used and use the search console, I can see the script is loaded in at the top, but the script doesn't work at all. I have been developing this in a JSFiddle and it is working fine.

Any help would be appreciated.

Answer 1

Replace your $( statements with the full jQuery(

eg

$('#found-result').hide();
$('#found-no-result').hide();
$('.colors-li').hide();
$('#search-mod').click(function(){

becomes:

jQuery('#found-result').hide();
jQuery('#found-no-result').hide();
jQuery('.colors-li').hide();
jQuery('#search-mod').click(function(){ 

etc