Columns filtering and custom DOM

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: None
Description of problem:
I added column filtering and set it up in "initComplete" section. I also defined a div that contains a drop down list to allow users to filter based on one column.

The problem I am facing is one or the other shows up depending on how I declare the datatable.
If I add the declaration in a function, say "bindMyDatatable()" and call it in document.ready portion, then column filtering appears but drop down won't. If I remove the function name and just declare the data table definition, then drop down (custom DOM) appears but column filtering won't. Not sure how to fix it.

$(documet).ready(function(){
    ...
    $("div.toolbar").html('markup for drop down');
    // setup column filtering
    $('#MyTable thead tr')
        .clone(true)
        .addClass('filters').
        .appendTo('#MyTable thead');

    bindMyTable();
    ...
});

function bindMyTable(){
    tblMyTable = $("MyTable").DataTable({
        ...
        dom:<'row'<col-md-2' l><'col-md-2'<\"toolbar\">><...>>";
        ...
        initCompleter: function(){
            ...
        }
   });

This shows column filtering but not drop down in custom DOM.

If I comment out bindMyTable in document.ready, and remove "function bindMyTable(){" and just leave table definition, then custom DOM appears but column filtering won't.