jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<div id="output" class="spaced">

</div>

<div id="example" class="spaced">
  <p style="font-weight: bold;">
    Example div showing the highlight effect working.
  </p>
</div>

<div class="spaced">
  <table id="demotbl" class="display" style="width;100%;">
  
  </table>
</div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.spaced {
   margin-bottom:20px;
}

.highlightEffect {
    transition: background;
    transition-duration: 1s;
    transition-timing-function: linear;
}

.highlight {
  background: #FFDC00 !important;
}

.highlight td {
  zbackground: #FFDC00 !important;
}

JavaScript

// the end goal is to show a highlight effect the first time a new row is
// seen by the user.  
// if a user is filtering or on page 2, and the new row is put in page 1
// i want to show with an effect it when it eventually gets drawn on screen.

var output = $('#output');

// this is a function I use to highlight element.  it uses transition end 
// to remove the effect and clean up.
var highlightElement = function(elem) {
	let el = $(elem);
  let id = el.attr('id') || 'newrow';
  let bgClass = 'highlight';

  // add the highlight transition css.
  // then add the finalColor css class that we want to end on
  el.addClass('highlightEffect');

    // once there, remove the color, which will trigger another animation
    // this makes it look smooth
    el.one("transitionend", {}, function () {
			output.append('<p> first transisition end for #' + id + ' </p>');
      // all done, now remove the highlight effect class 
      el.one("transitionend", {}, function () {
      	output.append('<p> last transisition end for #' + id + ' </p>');
        el.removeClass('highlightEffect');
      });

      el.removeClass(bgClass);
    });

    el.addClass(bgClass);
};

var data = [
	{ Name: 'test1', Message: 'title1'},
  { Name: 'test2', Message: 'title2'},
  { Name: 'test3', Message: 'title3'},
  { Name: 'test4', Message: 'title4'},
  { Name: 'test5', Message: 'title5'},
  { Name: 'test6', Message: 'title6'},
];

var rowshow = {};

var grid = $('#demotbl').DataTable({
	"columns": [
      {
        "data": "Name",
        "title": "Name",
        "orderable": false
      },
      {
        "data": "Message",
        "title": "Message",
        "orderable": false
      }
  ],
  "stateSave": false,
  "pageLength": 2,
  "rowCallback": function( row, data, displayNum, displayIndex, dataIndex ) {
    if (data.HighlightMe) {
    	output.append('<p>row cb fired</p>');
      let di = dataIndex.toString();
      if (!rowshow[di]) {
      	rowshow[di] = { r: row, d: data};
      }
   ...