Individual column search is not working with Horizontal scroll on (scrollX = true) at a time

I have table created column dynamically and bind JSON data to it using Jquery. Implement coumn search on Document.Ready function and column search working fine. but when I set scrollX= true to implement horizontal scroll and fixcolumn then horizontal scroll apply to table but column search stop working with it.

Can you guide me how to work together column search and horizontal scrollbar and fixcolumn together..

sample code

Column search

$j('#tblMasterList tfoot th').each(function () {
var title = $j(this).text();
$j(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

// DataTable
var table = $j('#tblMasterList').DataTable();

// Apply the search
table.columns().every(function () {
    var that = this;

    $j('input', this.footer()).on('keyup change', function () {
        debugger;
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
});

var r = $j('#tblMasterList tfoot tr');
r.find('th').each(function () {
    $j(this).css('padding', 8);
});
$j('#tblMasterList thead').append(r);
$j('#search_0').css('text-align', 'center');

DataTable binding with columns and JsonData
$j('#tblMasterList').DataTable({

    data: jsondata,
    columns: vCols,
    scrollX: true

});