Uncaught TypeError: $(...).select2 is not a function in CodeIgniter

Question

I am new to CodeIgniter and am currently stuck on a task in which I need to use multi select dropdown to display categories while adding a new product but when I run my code it shows the following error: https://i.stack.imgur.com/xxeCV.png
I have read almost all the similar questions but have not found any related to CodeIgniter. The most common answer to this is that jQuery is loaded twice but I have checked all my files that is not the case. So please direct me to the question if there is any related to CodeIgniter or help me with my code.
Thanks for any responses in advance.

The View to add new product:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');?>
<div class="main-panel">
  <div class="content-wrapper">
    <div class="row">
      <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <?php 
            $CI =& get_instance();
            $CI->load->library('ion_auth');
            if($CI->ion_auth->is_admin()){
              echo '<h4 class="font-weight-bold mb-0">Admin Dashboard</h4>';
            }
            else{
              echo '<h4 class="font-weight-bold mb-0">User Dashboard</h4>';
            }
            ?>
          </div>          
        </div>              
      </div>
    </div>
    <div class="row">
      <div class="col-12 grid-margin">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Add Product</h4>
            <?php echo form_open(base_url()."products/manageproducts/addproductinsert");?>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">Product Name</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="product_name" name="product_name" placeholder="Product Name"/>                    
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label class="col-sm-3 form-check-label">Categories</label>
                  <div class="col-sm-9">
                    <select id="catdropdown" name="cat_list[]" multiple="multiple">
                      <option value='0'>--Select Category--</option>   
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="text-center">
                  <input type="submit" name="submit" value="Submit" class="btn btn-primary">
                </div>
              </div>
            </div>
            <?php echo form_close(); ?>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#catdropdown').select2({
        ajax:{
          url:'<?php echo base_url() ?>categories/managecategories/getcategories',
          type:'post',
          dataType:'json',
          delay:250,
          data:function(param){
            return{
              searchTerm: param.term
            }
          },
          processResults: function(response){
            return {
              results:response
            }
          },
          cache:true
        }
      });
    });
  </script>

Controller:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class ManageProducts extends CI_Controller {
    public function __construct()
    {
        parent::__construct();
        $this->load->database();
        //$this->load->library('javascript/jquery');
        $this->load->library(['ion_auth', 'form_validation']);
        $this->load->helper(['url', 'language','form']);
        $this->form_validation->set_error_delimiters($this->config->item('error_start_delimiter', 'ion_auth'), $this->config->item('error_end_delimiter', 'ion_auth'));

        $this->lang->load('auth');
        $this->load->model('products_model');
        $this->load->model('categories/categories_model');
        
    }
    public function addproduct(){
        $res=$this->categories_model->showallcategories();
        $data['categories']=$res;
        $this->load->view('header');
        $this->load->view('sidebar');
        $this->load->view('addproduct',$data);
        $this->load->view('footer');
    }
}

Header file where jquery and select2 are included:

<!DOCTYPE html>
<html lang="en">

<head> <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="<?php echo base_url()?>vendors/ti-icons/css/themify-icons.css">
  <link rel="stylesheet" href="<?php echo base_url()?>vendors/base/vendor.bundle.base.css">
  <link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
  <link rel="shortcut icon" href="<?php echo base_url()?>images/favicon.png" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</head>

Answer 1

I solved it!
I did it by using the defer attribute in the script tag.
Here's what worked for me and will hopefully work for anyone who needs it in future:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js" defer></script>

Thanks to everyone who helped.