JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.2/jquery.multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.2/jquery.multiselect.js"></script>
<table id="list"></table>

CSS

html, body { font-size: 11px; }
.ui-multiselect-header a:hover {
    text-decoration: none;
}
.ui-multiselect-close {
	margin-right: 3px;
}

JavaScript

$(function () {
	"use strict";
  var selVal="CNC:CNC;DHL:DHL;FedEx:FedEx;TNT:TNT";
	var myData = [
			{
				id: "1",
				name: "John, Doe",
				note: "note",
				amount: "200.00",
				tax: "10.00",
				ship_via: "TNT",
				total: "210.00"
			}, {
				id: "2",
				name: "Ab, Smith",
				note: "note2",
				amount: "300.00",
				tax: "20.00",
				ship_via: "FedEx",
				total: "320.00"
			}, {
				id: "3",
				name: "test3",
				note: "note3",
				amount: "400.00",
				tax: "30.00",
				ship_via: "FedEx",
				total: "430.00"
			}, {
				id: "4",
				name: "test4",
				note: "note4",
				amount: "200.00",
				tax: "10.00",
				ship_via: "TNT",
				total: "210.00"
			}, {
				id: "5",
				name: "test5",
				note: "note5",
				amount: "300.00",
				tax: "20.00",
				ship_via: "FedEx",
				total: "320.00"
			}, {
				id: "6",
				name: "test6",
				note: "note6",
				amount: "400.00",
				tax: "30.00",
				ship_via: "FedEx",
				total: "430.00"
			}, {
				id: "7",
				name: "test7",
				note: "note7",
				amount: "200.00",
				tax: "10.00",
				ship_via: "TNT",
				total: "210.00"
			}, {
				id: "8",
				name: "test8",
				note: "note8",
				amount: "300.00",
				tax: "20.00",
				ship_via: "FedEx",
				total: "320.00"
			}, {
				id: "9",
				name: "test9",
				note: "note9",
				amount: "400.00",
				tax: "30.00",
				ship_via: "TNT",
				total: "430.00"
			}, {
				id: "10",
				name: "test10",
				note: "note10",
				amount: "500.00",
				tax: "30.00",
				ship_via: "TNT",
				total: "530.00"
			}, {
				id: "11",
				name: "test11",
				note: "note11",
				amount: "500.00",
				tax: "30.00",
				ship_via: "FedEx",
				total: "530.00"
			}, {
				id: "12",
				name: "test12",
				note: "note12",
				amount: "500.00",
				tax: "30.00",
				ship_via: "FedEx",
				total: "530.00"
			}, {
				id: "13",
				name: "test13",
				note: "note13",
				amount: "500.00",
				tax: "30.00",
				ship_via: "DHL",
				total: "530.00"
			}, {
				id: "14",
				name:...