Highlight and disable the rows in first and second table, selected data is same

Question

Have two tables example1 and example2, and checkboxes>> if check one row in first table and select one row in second table. And click on "matching records" button. if both lines are equal, need to highlight the row with color and disable the checkboxes. I tried and stuck, pls suggest the solution and some times first table row matches multiple rows of second table.

    $('#example').DataTable({
    'columnDefs': [{
        'targets': 0,
        'searchable': false,
        'orderable': false,
        'className': 'dt-body-center',
        'render': function(data, type, full, meta) {
            return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
        }
    }],
    'order': [
        [1, 'asc']
    ]
});
$('#example1').DataTable({
    'columnDefs': [{
        'targets': 0,
        'searchable': false,
        'orderable': false,
        'className': 'dt-body-center',
        'render': function(data, type, full, meta) {
            return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
        }
    }],
    'order': [
        [1, 'asc']
    ]
});

var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function() {
    alert(table.row(this).data());
});

var table2 = $('#example1').DataTable();

$('#example1 tbody').on('click', 'tr', function() {
    alert(table2.row(this).data());
});

$("#matchedRecords").on('click', function() {
    $('#example tbody tr').each(function() {
        var row = $(this).text();
        var isChecked = $(this).find("input:checkbox").is(":checked");

        $('#example1 tbody tr').each(function() {
            var _t = $(this);

            if (row == _t.text() && isChecked) {
                _t.prop({
                    'disabled': true,
                    background: red
                });
            }
        });
    });
});

Fiddle

Answer 1

I've changed your matchedRecords function so it looks like this:

$("#matchedRecords").on('click', function() {

  $('#example tbody input:checked').each(function() {
    var inx = $(this).closest("tr").index();
    if($('#example1 tbody tr:eq('+inx+') input').is(":checked")){
      $('#example1 tbody tr:eq('+inx+') input').prop({'disabled':true})
      $('#example1 tbody tr:eq('+inx+')').css("background-color","red")
      $(this).prop({'disabled':true})
      $(this).closest('tr').css("background-color","red")
    }
  })
});

DEMO