Moved footer to header .And Sorting taking place when trying to filter the dropdown

Moved footer to header .And Sorting taking place when trying to filter the dropdown

Dear All,

In my fiddle I had moved my footer to header , But sorting is taking place when I try to filter the column.
For that I had created another thead and trying to point the sort to newly created thead by following the url which is exactly matching my requirement

I tried adjusting the the below code. But find no luck can any one please do let me know what's the issue 

  1.   $('#example').DataTable( {
  2.         initComplete: function () {
  3.             this.api('thead tr:eq(1) th').columns().every( function () {
  4.                 var column = this;
  5.                   $(column.header()).append("<br>")
  6.                 var select = $('<select><option value=""></option></select>')
  7.                    .appendTo($(column.header()))
  8.                     .on( 'change', function () {
  9.                         var val = $.fn.dataTable.util.escapeRegex(
  10.                             $(this).val()
  11.                         );

  12.                     var table = $('#example').DataTable({orderCellsTop: true
  13.                                });
  14.                         column
  15.                             .search( val ? '^'+val+'$' : '', true, false )
  16.                             .draw();
  17.                     } );

  18.                 column.data().unique().sort().each( function ( d, j ) {
  19.                     select.append( '<option value="'+d+'">'+d+'</option>' )
  20.                 } );
  21.             } );
  22.         }
  23.     } );

Srk