Problem with my magnifying glass in Django

Question

I'm trying to build a magnifying glass for my webpage in Django.

I'm using a library called AnythingZoomer to magnify text: https://css-tricks.github.io/AnythingZoomer/text.html. The problem is that after adding the Scripts and the CSS that the give you in their project the magnifying effect doesn't work. I added the ids and the code needed in the HTML but it also won't work.

Magnifying script (It's in base.html):

<script>
    $(function() {

        // clone the small area, the css will define the dimensions
        // default class name for the large area is "large"
        $("#zoom").anythingZoomer({
            clone: true
        });

        // zoom in
        $('button').click(function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            // .small p { font-size: 8px; width: 300px; }
            var origW = 300,
                origSz = 8,
            // get multiple
            multiple = parseInt( $(this).text() );
            $('.large p').css({
                width: origW * multiple,
                fontSize: origSz * multiple
            });
            // update anythingZoomer window,
            // but first turn off clone since cloning the small area again will remove our changes
            $('#zoom').getAnythingZoomer().options.clone = false;
            $('#zoom').anythingZoomer();
        });

    });
    </script>

<link rel="stylesheet" href="{% static 'css/anythingzoomer.css' %}">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="{% static 'js/jquery.anythingzoomer.js' %}"></script>

The text I'm trying to magnify (It's in index.html):

<div id="zoom" class="row" class="zoom">
        <div class="col-md-12"> 
        <p>La memoria es una de las principales facultades humanas, nos define y nos hace únicos, 
    recogiendo y reteniendo cada una de las experiencias vividas. 
    Debemos proteger este tesoro para que la biografía perdure más allá de la propia persona.</p> 
</div>
</div>

The CSS (AnythingZoomer, I have another one for my webpage):

/* AnythingZoomer */
.az-wrap, .az-small, .az-large {
    position: relative;
}
.az-wrap-inner {
    display: block;
    margin: 0 auto; /* center small & large content */
}
/* This wraps the large image and hides it */
.az-zoom {
    background: #fff;
    border: #333 1px solid;
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    overflow: hidden;
    z-index: 100;
    display: none;
    -moz-box-shadow: inset 0px 0px 4px #000;
    -webkit-box-shadow: inset 0px 0px 4px #000;
    box-shadow: inset 0px 0px 4px #000;
}
/* Class applied to az-mover when large image is windowed */
.az-windowed {
    overflow: hidden;
    position: absolute;
}
/* Class applied to az-mover when large image is fully shown */
.az-expanded {
    height: auto;
    width: auto;
    position: static;
    overflow: visible;
}

/* overlay small area */
.az-overlay {
    background-color: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 10;
}

/* fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
*/

/* edit mode coordinate styling */
.az-coords {
    display: none; /* hidden when expanded */
}
.az-zoom .az-coords {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: #000;
    background: rgba(0,0,0,0.5);
    color: #fff;
}

Help would be very much appreciated