DataTables multi-filter-select not populating dropdown
<p>I'm creating a DataTables table where data comes from a AJAX call and it loads fine. The search works fine as well. When I add the code for the multi-filter-select, the drop-downs appear but they are empty. I'm using latest library for both jQuery and DataTables.</p>

<p>JS</p>

<pre><code>function overview() {
    $.ajax({
        url: "/_inc/_ajax/ajax.tables.php",
        dataType: 'json',
        success: function(results) {

        var table = $('#overviewTable').DataTable
        ({
            initComplete:       function () {
                                    this.columns().every( function () {
                                        var column = this;
                                        var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                                            .appendTo( $(column.footer()).empty() )
                                            .on( 'change', function () {
                                                var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                );

                                                column
                                                    .search( val ? '^'+val+'$' : '', true, false )
                                                    .draw();
                                            } );

                                        column.data().unique().sort().each( function ( d, j ) {
                                            select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
                                        } );
                                    } );
                                }
        });

        table.clear();
        for(var i = 0; i &lt; results["id"].length; i++) {
            table.row.add(
                [ 
                    results["id"][i],
                    results["title"][i],
                    results["Tier"][i],
                    results["region"][i],
                    results["2016"][i],
                    results["2017"][i],
                    results["Letter_Type"][i],
                    results["Change_Type"][i],
                ]
            ).draw();  
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("ERROR: " + xhr.responseText + " - " + thrownError);
    }
});
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;table id="overviewTable" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;';
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;TITLE&lt;/th&gt;
            &lt;th&gt;TIER&lt;/th&gt;
            &lt;th&gt;REGION&lt;/th&gt;
            &lt;th&gt;2016&lt;/th&gt;
            &lt;th&gt;2017&lt;/th&gt;
            &lt;th&gt;LETTER TYPE&lt;/th&gt;
            &lt;th&gt;CHANGE TYPE&lt;/th&gt;
         &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tfoot&gt;
         &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;TITLE&lt;/th&gt;
            &lt;th&gt;TIER&lt;/th&gt;
            &lt;th&gt;REGION&lt;/th&gt;
            &lt;th&gt;2016&lt;/th&gt;
            &lt;th&gt;2017&lt;/th&gt;
            &lt;th&gt;LETTER TYPE&lt;/th&gt;
            &lt;th&gt;CHANGE TYPE&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
&lt;/table&gt;';
</code></pre>