JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<table id="myTable" class="tablesorter table table-striped">
        <thead>
        <tr>
            <th width="75px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
            <th width="125px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
            <th width="550px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
            <th width="100px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
            <th></th>
        </tr>
        </thead>
</table>

CSS

body {
    font-family: Arial;
}

.accordion {
    border-top: 1px solid #c1c1c1;
}

.accordion dt {
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
    display: block;
    cursor: pointer;
    overflow: hidden;
}

.accordion dt span {
    float: left;
    font-weight: normal;
    font-size: 17px;
}

.accordion dt .accordion_icon {
    float: right;
}

.accordion dt.active {
    background: #DBDBDB;
}

.accordion_content {
    margin: 0;
    padding: 15px;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-bottom: 1px solid #c1c1c1;
}

JavaScript

$('[name="caret"]').click(function() {
                $(this).toggleClass('fa fa-caret-up fa-1x');
            });