diff --git a/media/css/main.css b/media/css/main.css
index 5d948317..5fc26e34 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1208,6 +1208,30 @@ h1.subject {
     font-size: 1.2em;
 }
 
+/* Feature matrix */
+form#featurematrix_version_filter {
+    text-align: center;
+}
+input.featurematrix_version {
+    margin-right: 15px;
+}
+input.featurematrix_version:last-child {
+    margin-right: 0;
+}
+td.fm_no {
+    background-color: #ffdddd !important;
+}
+td.fm_yes {
+    background-color: #ddffdd !important;
+}
+td.fm_obs {
+    background-color: #ddddff !important;
+}
+td.fm_unk {
+    background-color: #ffffaa !important;
+}
+
+
 /** ALL RESPONSIVE QUERIES HERE */
 /* Small devices (landscape phones, 576px and up)*/
 
diff --git a/media/js/featurematrix.js b/media/js/featurematrix.js
new file mode 100644
index 00000000..f82c4da2
--- /dev/null
+++ b/media/js/featurematrix.js
@@ -0,0 +1,74 @@
+/*
+ * Filter feature matrix
+ */
+$(document).ready(function(){
+    var eol_versions = $('#feature-matrix-filter').data('eol').split(',');
+
+    // Create form to contain filter checkboxes
+    $('#feature-matrix-filter').html('<form id="featurematrix_version_filter"><h5>Filter by version</h5></form>');
+
+    // Generate a list of versions based on table column headers
+    $('table tr:first th').not('th:nth-child(1)').each(function(){
+        var version_class = $(this).text().replace('.', '');
+
+        // Only mark a box as checked if no in the EOL list
+        var checked = (eol_versions.indexOf($(this).text()) == -1 ? 'checked="checked"' : '');
+
+        $('form#featurematrix_version_filter').append('<label for="' + version_class + '">' + $(this).text()
+					+ '</label><input class="featurematrix_version" ' + checked + ' type="checkbox" id="toggle_' + version_class + '"/ value="' +
+          $(this).text() + '"/>&nbsp;');
+    });
+
+    // Add a checkbox to hide rows where all values are the same between
+    // displayed versions.  Default: checked.
+    $('form#featurematrix_version_filter').append('<hr style="margin: 0;" /> <label for="hide_unchanged">Hide unchanged features</label><input type="checkbox" id="hide_unchanged" />');
+
+    // Show/hide column based on whether supplied checkbox is checked.
+    function filter_version(checkbox)
+    {
+        var total_checked = $('form#featurematrix_version_filter .featurematrix_version:checked').length;
+        var column=$("table tr:first th").index($("table tr:first th:contains('" + checkbox.val() + "')")) + 1;
+        if (total_checked) {
+            $('.feature-version-col').css('width', (70 / total_checked) + '%');
+        }
+        $("table th:nth-child(" + column + "), table td:nth-child(" + column + ")").toggle(checkbox.is(":checked")).toggleClass('hidden');
+        hide_unchanged();
+        // Lastly, if at this point an entire row is obsolete, then hide
+        $('tbody tr').each(function(i, el) {
+            var $tr = $(el),
+		visible_count = $tr.find('td:not(.hidden)').length,
+		obsolete_count = $tr.find('td.fm_obs:not(.hidden)').length;
+            // if visible count matches obsolete count, then hide this row
+            $tr.toggle(visible_count !== obsolete_count);
+        });
+    }
+
+    // Show/hide rows if all values are the same in displayed cells
+    function hide_unchanged()
+    {
+        var hide_unchanged=$('form#featurematrix_version_filter input#hide_unchanged').is(':checked');
+        $('table tr').has('td').each(function(){
+            var row_values=$(this).children('td').not('.colFirst, .hidden');
+            var yes_count=row_values.filter(":contains('Yes')").length;
+            var no_count=row_values.filter(":contains('No')").length;
+            var obsolete_count=row_values.filter(":contains('Obsolete')").length;
+            $(this).toggle(hide_unchanged == false || (yes_count != row_values.length && no_count != row_values.length && obsolete_count != row_values.length));
+        });
+    }
+
+    // Upon loading the page, apply the filter based on EOL versions that are
+    // unchecked.
+    $('form#featurematrix_version_filter input.featurematrix_version').not(':checked').each(function(){
+        filter_version($(this));
+    });
+
+    // Apply filter based on change in check status of clicked version filter.
+    $('form#featurematrix_version_filter input.featurematrix_version').on("change", function(){
+        filter_version($(this));
+    });
+
+    // Show/hide unchanged feature rows when checkbox clicked.
+    $('form#featurematrix_version_filter input#hide_unchanged').on("change", function(){
+        hide_unchanged();
+    });
+});
diff --git a/templates/base/base.html b/templates/base/base.html
index 9ff7054a..3ae7f7d3 100644
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -87,6 +87,7 @@
     <script src="/media/js/popper.min.js?{{gitrev}}"></script>
     <script src="/media/js/bootstrap.min.js?{{gitrev}}"></script>
     <script src="/media/js/main.js?{{gitrev}}"></script>
+{%block extrascript%}{%endblock%}
     <script type="text/javascript">
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-1345454-1']);
diff --git a/templates/featurematrix/featurematrix.html b/templates/featurematrix/featurematrix.html
index 7a068d5e..492e78da 100644
--- a/templates/featurematrix/featurematrix.html
+++ b/templates/featurematrix/featurematrix.html
@@ -1,92 +1,10 @@
 {%extends "base/page.html"%}
 {%block title%}Feature Matrix{%endblock%}
-{%block extrahead%}
-<script type="text/javascript" src="/media/js/jquery.min.js"></script>
-<script type="text/javascript">
-  //<![CDATA[
-    $(document).ready(function(){
-      var eol_versions = ["{{eol_versions|join:'","'}}"];
 
-      // Create form to contain filter checkboxes
-      $('#feature-matrix-filter').html('<form id="version_filter"><h5>Filter by version</h5></form>');
-
-      // Generate a list of versions based on table column headers
-      $('table tr:first th').not('th:nth-child(1)').each(function(){
-        var version_class = $(this).text().replace('.', '');
-
-        // Only mark a box as checked if no in the EOL list
-        var checked = (eol_versions.indexOf($(this).text()) == -1 ? 'checked="checked"' : '');
-
-        $('form#version_filter').append('<label for="' + version_class + '">' + $(this).text()
-          + '</label><input class="version" ' + checked + ' type="checkbox" id="toggle_' + version_class + '"/ value="' +
-          $(this).text() + '"/>&nbsp;');
-      });
-
-      // Add a checkbox to hide rows where all values are the same between
-      // displayed versions.  Default: checked.
-      $('form#version_filter').append('<hr style="margin: 0;" /> <label for="hide_unchanged">Hide unchanged features</label><input type="checkbox" id="hide_unchanged" />');
-
-      // Show/hide column based on whether supplied checkbox is checked.
-      function filter_version(checkbox)
-      {
-        var total_checked = $('form#version_filter .version:checked').length;
-        var column=$("table tr:first th").index($("table tr:first th:contains('" + checkbox.val() + "')")) + 1;
-        if (total_checked) {
-          $('.feature-version-col').css('width', (70 / total_checked) + '%');
-        }
-        $("table th:nth-child(" + column + "), table td:nth-child(" + column + ")").toggle(checkbox.is(":checked")).toggleClass('hidden');
-        hide_unchanged();
-        // Lastly, if at this point an entire row is obsolete, then hide
-        $('tbody tr').each(function(i, el) {
-          var $tr = $(el),
-              visible_count = $tr.find('td:not(.hidden)').length,
-              obsolete_count = $tr.find('td.fm_obs:not(.hidden)').length;
-          // if visible count matches obsolete count, then hide this row
-          $tr.toggle(visible_count !== obsolete_count);
-        });
-      }
-
-      // Show/hide rows if all values are the same in displayed cells
-      function hide_unchanged()
-      {
-        var hide_unchanged=$('form#version_filter input#hide_unchanged').is(':checked');
-        $('table tr').has('td').each(function(){
-          var row_values=$(this).children('td').not('.colFirst, .hidden');
-          var yes_count=row_values.filter(":contains('Yes')").length;
-          var no_count=row_values.filter(":contains('No')").length;
-          var obsolete_count=row_values.filter(":contains('Obsolete')").length;
-          $(this).toggle(hide_unchanged == false || (yes_count != row_values.length && no_count != row_values.length && obsolete_count != row_values.length));
-        });
-      }
-
-      // Upon loading the page, apply the filter based on EOL versions that are
-      // unchecked.
-      $('form#version_filter input.version').not(':checked').each(function(){
-        filter_version($(this));
-      });
-
-      // Apply filter based on change in check status of clicked version filter.
-      $('form#version_filter input.version').on("change", function(){
-        filter_version($(this));
-      });
-
-      // Show/hide unchanged feature rows when checkbox clicked.
-      $('form#version_filter input#hide_unchanged').on("change", function(){
-        hide_unchanged();
-      });
-    });
-  //]]>
-</script>
-<style type="text/css">
-form#version_filter { text-align: center; }
-input.version { margin-right: 15px; }
-input.version:last-child { margin-right: 0; }
-td.fm_no { background-color: #ffdddd !important; }
-td.fm_yes {  background-color: #ddffdd !important; }
-td.fm_obs { background-color: #ddddff !important; }
-td.fm_unk { background-color: #ffffaa !important; }
-</style>
+{%block extrascript%}
+<script type="text/javascript" src="/media/js/featurematrix.js"></script>
 {%endblock%}
+
 {%block contents%}
 <h1>Feature Matrix <i class="fas fa-th-list"></i></h1>
 <p>
@@ -104,7 +22,7 @@ the text.
 </ul>
 
 <div class="row">
-  <div id="feature-matrix-filter" class="col-8 offset-2 border"></div>
+  <div id="feature-matrix-filter" class="col-8 offset-2 border" data-eol="{{eol_versions|join:','}}"></div>
 </div>
 
 {% for group in groups %}