Element works, but not on wordpress site [duplicate]

Question

I made an instagram widget on codepen. It works great and it functions. However, when I try adding it to my site it does not show up. Does anyone have any suggestions for how I could get this instagram widget to work?

codepen - https://codepen.io/elle343/pen/owBoyE

my html

<ul id="rudr_instafeed"></ul>

my css

#rudr_instafeed{
   margin: 42px 0 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  text-align: center; 
  list-style:none;
}
#rudr_instafeed li{
display: inline-block;
    vertical-align: middle;
    position: relative;
}
#rudr_instafeed li img{
max-height: 260px;
      position: relative;
      z-index: 0;
}

instagram-footer.js

var token = '5219525.f0b48c7.17327f93adbe4fbb89ccd13a1a226a33',
    num_photos = 20;

$.ajax({
    url: 'https://api.instagram.com/v1/users/self/media/recent',
    dataType: 'jsonp',
    type: 'GET',
    data: {access_token: token, count: num_photos},
    success: function(data){
        console.log(data);
        for( x in data.data ){
            $('ul').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>');
        }
    },
    error: function(data){
        console.log(data);
    }
});

functions.php

function instagramfooter() {
 wp_enqueue_script( 'instagramfooter', get_stylesheet_directory_uri() . '/js/instagram-footer.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-2.2.4', get_template_directory_uri() . '/js/jquery-2.2.4.min.js', array( 'jquery' ), '2.2.4', true );

}
 add_action( 'wp_enqueue_scripts', 'instagramfooter' );

In my JS folder /js/jquery-2.2.4.min.js (from here - https://code.jquery.com/jquery-2.2.4.min.js)

Answer 1

To avoid conflict, WordPress requires you to use jQuery instead of $. So, in your code, you should replace $.ajax() with jQuery.ajax() and $('ul') with jQuery('ul').

You can notice there are syntax errors in your browser's console, such as:

Error: $.ajax is not defined