Datatables Merge Jquery/javascript Functions From Two Seperate Tables

I am trying to make two functions work together that both work on their own. Number 1: Is my table with a dropdown filter inside a control panel which I am trying to add a secondar

Solution 1:

Here is the working solution jsfiddle

$(document).ready(function () {
  var dataTable = $('#example').DataTable({
    ordering: false,
    bLengthChange: false,
    initComplete: function () {
        this.api().columns(2).every(function () {
            var column = this;
            var select = $('<select><option value="">Show all</option></select>')
                .appendTo($("#control-panel").find("div").eq(1))
                .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('<option value="' + d + '">' + d + '</option>')
            });
        });
    }        
 });

 $('#checkbox-filter').on('change', function() {
    dataTable.draw();
 });

 $.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var target = 'Software Engineer';
    var position = data[1]; // use data for the age column
    if($('#checkbox-filter').is(":checked")) {
       if (target === position) {
          return true;
       }
       return false;
    }
    return true;
  }
 );
});