Uncaught TypeError: $(...).registerMessage is not a function

Hi Team

I am unable to register new users, due to this issue to my js file. How do i resolve this issue? I have the correct js library. Let me share my logic below;

// register.js

(function($) {
  $.fn.registerMessage = function(message, type) {
    // create a new element to display the message
    var messageElem = $('
', {
      class: 'register-messages ' + type,
      text: message
    });

    // append the message element to the div card
    $('#registration-messages').html(messageElem);

    // set a timeout to remove the message element after 5 seconds
    setTimeout(function() {
      messageElem.remove();
    }, 5000);
  };
})

// html code


  

    

      

        
      
      

        

      
      

        
      
      Submit
    
  
 







// register.js
/**
*@author:Gcobani Mkontwana
*@date:03/05/2023
*@Register users to the form and validate empty submission.
**/
$(document).ready(function() {
  $('#registration-form').submit(function(event) {
    event.preventDefault(); // prevent the form from submitting normally

    var name = $('#name').val();
    var email = $('#email').val();
    var password = $('#password').val();

    // validate the form data
    if (!name || !email || !password) {
      alert('Please fill in all fields');
      return;
    }

    // submit the form data using AJAX
			$.ajax({
			type: 'POST',
			url: 'register.php',
			data: {
			name: name,
			email: email,
			password: password
		},
		success: function(response) {
		if (response === 'success') {
		$('body').registerMessage('Registration successful', 'success');
		
		} else {
		$('body').registerMessage('Registration failed', 'alert');
    }
	}
	});

  });
});