JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ul id="types">

    <li>
        <h3>Types</h3></li>

</ul>

<ul id="classes">
    <li>
        <h3>
Classes
</h3></li>

</ul>

<ul id="at-least-one">
    <li>
        <h3>
At least one TYPE <br>letter in CLASSES
</h3></li>
</ul>
<ul id="both-not">
    <li>
        <h3>
Both TYPE letters<br> not in CLASSES
</h3></li>
</ul>

SCSS

h3 {
    clear:both;
}
#types,
#classes, #at-least-one, #both-not {
    width: auto;
    float: left;
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    display:block;
    
    li {
        list-style-type: none;
    }
}

JavaScript

var data = {
    "types": [{
        "id": "AC",
        "text": "Auto Carrier",
        "searchText": "Auto Carrier"
    }, {
        "id": "BT",
        "text": "B-Train",
        "searchText": "B-Train"
    }, {
        "id": "CN",
        "text": "Conestoga",
        "searchText": "Conestoga"
    }, {
        "id": "C",
        "text": "Container",
        "searchText": "Container"
    }, {
        "id": "CI",
        "text": "Container Insulated",
        "searchText": "Container Insulated"
    }, {
        "id": "CR",
        "text": "Container Refrigerated",
        "searchText": "Container Refrigerated"
    }, {
        "id": "CV",
        "text": "Conveyor",
        "searchText": "Conveyor"
    }, {
        "id": "DD",
        "text": "Double Drop",
        "searchText": "Double Drop"
    }, {
        "id": "LA",
        "text": "Drop Deck Landoll",
        "searchText": "Drop Deck Landoll"
    }, {
        "id": "DT",
        "text": "Dump Trailer",
        "searchText": "Dump Trailer"
    }, {
        "id": "F",
        "text": "Flatbed",
        "searchText": "Flatbed"
    }, {
        "id": "FA",
        "text": "Flatbed Air-Ride",
        "searchText": "Flatbed Air-Ride"
    }, {
        "id": "FN",
        "text": "Flatbed Conestoga",
        "searchText": "Flatbed Conestoga"
    }, {
        "id": "F2",
        "text": "Flatbed Double",
        "searchText": "Flatbed Double"
    }, {
        "id": "FZ",
        "text": "Flatbed HazMat",
        "searchText": "Flatbed HazMat"
    }, {
        "id": "FH",
        "text": "Flatbed Hotshot",
        "searchText": "Flatbed Hotshot"
    }, {
        "id": "MX",
        "text": "Flatbed Maxi",
        "searchText": "Flatbed Maxi"
    }, {
        "id": "FD",
        "text": "Flatbed or Step Deck",
        "searchText": "Flatbed or Step Deck"
    }, {
        "id": "FS",
        "text": "Flatbed w/Sides",
        "searchText": "Flatbed w/Sides"
    }, {
        "id": "FT",
        "text": "Flatbed...