JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css">
<script src='http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js'></script>


<table class='' id='Id_derekw' cellspacing="0" width="">
  <thead>
    <tr>
      <th>Col0</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href='www.1234.com'>702</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">702 warnings</a>
      </td>
      <td><a id="asdf" href='www.1234.com' title="CheckRed (Err):X > 0">702 warnings</a>
      </td>
      <td><a href='www.1234.com' >702 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">702 warnings</a>
      </td>
    </tr>
    <tr>
      <td><a href='www.1234.com'>669</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">669 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X > 0">669 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X &gt; 0">669 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">669 warnings</a>
      </td>
    </tr>
    <tr>
      <td><a href='www.1234.com'>120</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">120 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X > 0">120 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X &gt; 0">120 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">120 warnings</a>
      </td>
    </tr>
    <tr>
      <td><a href='www.1234.com'>682</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">682 warnings</a>
      </td>
      <td><a href='www.1234.com' title="CheckRed (Err):X > 0">682...

JavaScript

$(document).ready(function() {

  // 1. This works. The column sorting is correct.
  // $('#Id_derekw').DataTable();

  // 2. This will NOT work. The column sorting is incorrect.
  // Col2 and Col3 will not sort correctly.
  // - is it related to the > or &gt; symbols
  $('[title!=""]').qtip({});
  $('#Id_derekw').DataTable();

  // 3. This will work. The column sorting is correct.
  //$('#Id_derekw').DataTable();
  //$('[title!=""]').qtip({});


});