Datatable Row Select

Illustrating issue with row select when background color changed

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>some data</td>
                <td>HVZ</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>HVS</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>AAA</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>HVO</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>BBB</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
        </tbody>
    </table>

CSS

td.orange {
    background-color: orange;
}
td.pink {
    background-color: pink;
}
td.yellow {
    background-color: yellow;
}
table.dataTable tbody tr.selected {
        background-color: red!important;
    }

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
    		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        if ( aData[1].startsWith("H")) {
          if ( aData[1].endsWith("VS")) {
            $('td', nRow).eq(1).addClass('orange');
          }
          else if ( aData[1].endsWith("O")) {
            $('td', nRow).eq(1).addClass('yellow');
          }
          else {
            $('td', nRow).eq(1).addClass('pink');
          }
        }
      },
        dom: 'Bfrtip',
        select: true,
        buttons: [
            {
                text: 'Select all',
                action: function () {
                    table.rows().select();
                }
            },
            {
                text: 'Select none',
                action: function () {
                    table.rows().deselect();
                }
            }
        ]
    } );
    
    table.on( 'select', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var data = table.rows( indexes ).data().pluck( 'id' );
 alert('');
        // do something with the ID of the selected items
    }
} );
} );