Creating button that displays different content when clicked

I am brand new to Jquery and web development and I am attempting to build a random quote generator.

The web app consists of one button that when clicked displays a new quote. It's a static site and its all done with html/css/jquery.

My problem is when the button is clicked it displays the first quote, but when clicked again it does not change. I want the button to show a new quote every time it is clicked.

I'm sure this is an easy fix for anyone proficient with Jquery:

  $(document).ready(function() {
  $(".quote-button").click(function() {
    $('#quote-box p').html(quotes[i].q);
    $('#quote-box a').attr('href', quotes[i].l);
    $('quote-box a').html(quotes[i].a);
  });
});

var quotes = [{
    q: 'The Great Man … is colder, harder, less hesitating, and without respect and  without the fear of “opinion”; he lacks the virtues that accompany respect and “respectability”, and altogether everything that is the “virtue of the herd”. If he cannot lead, he goes alone. … He knows he is incommunicable: he finds it tasteless to be familiar. … When not speaking to himself, he wears a mask. There is a solitude within him that is inaccessible to praise or blame. - Friedrich Nietzche, The Will to Power'
  }, {
    q: 'Power is given only to those who dare to lower themselves and pick it up. Only one thing matters, one thing; to be able to dare! Fyodor Dostoevsky'
  }, {
    p: 'The more sand has escaped from the hourglass of our life, the clearer we should see through it. Niccolo Machiavelli'
  }

];

var i = Math.floor((Math.random() * quotes.length));