JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<script src="http://vanare.loc/bundles/vanarewebsite/js/jquery.dataTables.min.js"></script>
<script src="http://vanare.loc/bundles/vanarewebsite/js/jquery.dataTables.bootsrtap.js"></script>
<script src="http://vanare.loc/bundles/vanarewebsite/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vanare.loc/bundles/vanarewebsite/css/dataTables.css">
<link rel="stylesheet" href="http://vanare.loc/bundles/vanarewebsite/css/bootstrap.min.css">
<div class="box-05 client-profile-box pad-cp-2 user-profile-feed notifications-block">
    <div class="box-heading-01 clearfix">
        <h2 class="pull-left">Notifications</h2>
        <div class="pull-right">
            <a href="#" class="ico-expand expand-this"></a>
        </div>
    </div>
    <div>
        <div class="head-block-01">
            <ul class="nav nav-tabs tabs-03" role="tablist">
                <li class="active total">
                    <a href="#totalAlertsTaboverview" data-search="" role="tab" data-toggle="tab">All</a>
                </li>
                                    <li>
                        <a href="#cashAlertsTaboverview" data-search="cash" role="tab" data-toggle="tab">Cash</a>
                    </li>
                                                    <li>
                        <a href="#accountAlertsTaboverview" data-search="account" role="tab" data-toggle="tab">Account</a>
                    </li>
                                                    <li>
                        <a href="#tradeAlertsTaboverview" data-search="trade" role="tab" data-toggle="tab">Trade</a>
                    </li>
                                <li>
                    <a href="#archiveAlertsTaboverview" data-search="archived" role="tab" data-toggle="tab">Important</a>
                </li>
            </ul>
        </div>
        <div class="alerts-dashboard-block no-padding">
            <div class="notification-table-container fixed-header-table-wrapper custom-scrollbar...

JavaScript

var ARCHIVE_TAB_ANCHOR = '#archivedAlertsTab';

function initializeCommon(table, columns) {
    // Expand notification data
    $('.notifications-table tbody').on('click', '.expand-alert', function (e) {
        e.preventDefault();
        var $tr = $(this).closest('tr');
        var row = table.row($tr);

        if (row.child.isShown()) {
            row.child.hide();
            $tr.removeClass('shown');
        } else {
            var content = null;
            var value = $tr.data('value');
            if (Array.isArray(value)) {
                content = buildValueFunction(value);
            } else {
                content = formatDetails(value);
            }
            row.child($('<tr><td colspan="2"></td><td colspan=' + (columns - 2) + '>' + content + '</td></tr>')).show();
            $tr.addClass('shown');
        }

        if ($tr.hasClass('new')) {
            $.post(Routing.generate('clients_notifications_read', {
                'alert': $tr.data('id')
            }));

            var $tabCounter = $('.alerts-tabs').not('.modal-body .alerts-tabs').find('li.active').find('span.tab-count, span.num-value');
            $tabCounter.html(parseInt($tabCounter.html()) - 1);

            // Change alerts widget in topbar
            updateTopBarWidget(null, -1);
        }

        $tr.toggleClass('opened');
        $tr.removeClass('new');
    });

    // Filter data for selected tab
    $('a[data-toggle="tab"]', '.notifications-block').on('show.bs.tab', function (e) {
        if ($(this).attr('href') == ARCHIVE_TAB_ANCHOR) {
            $('.readmark-link').addClass("light-grey");
            $('.readmark-link').removeClass("green");
        } else {
            $('.readmark-link').removeClass("light-grey");
            $('.readmark-link').addClass("green");
        }

        var filter = $(e.target).data('search');
        //var table = $(this).closest('.notifications-block').find('.notifications-table').first().DataTable();

        if (filter ==...