How do I retain the toggle class name after a setInterval from jQuery

Question

I'm trying to have a table that will update every 15 seconds using the setInverval function while also be able to retain the toggleClass name that is set, which highlights the clicked row in the table.

The problem is once the setInterval is executed it clears the selected rows and I'm also not able to select any rows afterwards. Any idea what I'm doing wrong?

Here is the code, but with static data it doesn't seem to re populate the table row after the setInverval is executed (works fine when calling from a database).

https://jsfiddle.net/karlinit/Lfq90z8j/

HTML

<div id="refresh">
    <table id="myTable"  class="table">
        <tr>
            <th class="col_1">TH1_Data</th>
            <th class="col_2">TH2_Data</th>
            <th class="col_2">TH3_Data</th>
            <th class="col_3">TH4_Data</th>
            <th class="col_3">TH5_Data</th>
            <th class="col_3">TH6_Data</th>
        </tr>
        <tr align="center" class="portRow">
            <td class="col_1">Col1_Data</td>
            <td class="col_2">Col2_Data</td>
            <td class="col_2">Col3_Data</td>
            <td class="col_3">Col4_Data</td>
            <td class="col_3">Col5_Data</td>
            <td class="col_3">Col6_Data</td>
        </tr>
    </table>
</div>

JavaScript

//  Highlight td row on click. BG color defined in CSS
$("#myTable").on('click','.portRow',function(e){
        e.preventDefault();
        $(this).toggleClass("selected");
        $(".port").toggleClass("tagged");
});
// 15 second interval to refresh tableRefresh function
setInterval("tableRefresh();",15000);

// tableRefresh Function: Defines what HTML ID to refresh
function tableRefresh(){
   $('#refresh').load(location.href + ' #myTable');
}

CSS

#myTable {
float:left;
border:1px solid #dfdfdf;
border-collapse:collapse;
width:100%;
  }

  .selected {
      background: #00afd7;
  }