Getting list.js filter function to work

I cannot seem to get the List.js filter function to work. And the documentation for List.js leaves a lot to be desired as a newbie developer.

Here's my code:

HTML:

<div class="col-sm-12" id="lessons">
  <input class="search" placeholder="Search" />
  <button class="filter-series">James</button>
  <ul class="list">
    
</ul>
</div>

JS:

<!-- list.js script -->
<script type="text/javascript">
<!--
  var options = {
    valueNames: [ 'series', 'date']
  };

  var featureList = new List('lessons', options);

  $('#filter-series').on('click',function(){
    var $text = $(this).text();
    if($(this).hasClass( 'selected' )){
      featureList.filter();
      $(this).removeClass('selected');
    } else {
      featureList.filter(function(item) {
        return (item.values().series == $text);
      });
      $(this).addClass('selected');
    }
  });

});

//-->
</script>

You can see what happens here. Basically, when I hit the "James" button, nothing happens. I have searched StackOverflow looking for an answer, but I cannot get it to work.

I would eventually like to have a drop-down menu with all the lesson series for people to filter through. But just getting this one should teach me enough about list.js to get it to work.