JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="selectedItemTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td class="propName">${ propertyName }</td>
            <td class="propValue">${ propertyValue }</td>
        </tr>
    </script>

<div>
        
        <input id="combo"></input>
    </div>
    <div id="itemData">
        
        <div id="selItemLabel">Selected Item</div>
        <table id="table" class="boxed"></table>
    </div>

CSS

.propName { font-weight: bold; border-bottom: 2px dotted Gray; padding-right: 10px; }
        .propValue { font-weight: normal; border-bottom: 2px dotted Gray; }
        .boxed { border: 1px solid Gray; margin: 3px 3px 3px 3px; padding: 3px 3px 3px 3px; border-radius: 3px; font-weight: bold; }
        .dropDownHeaderFooter
         {
            border: 1px solid Gray; 
            margin: 3px 3px 3px 3px; 
            padding: 3px 3px 3px 3px; 
            border-radius: 3px; 
            font-weight: bold; 
         }
        #selItemLabel { font-weight: bold; margin: 20px 3px 3px 3px; }

JavaScript

$(function () {
//  Helper function to put an item data token to the selected item table utilizing a jQuery template
        var selectedItemTemplate = '<tr><td class="propName">${propertyName}</td><td class="propValue">${propertyValue}</td></tr>';
        function addItemValue(tableObject, item, itemProp) {
            if (!($.isFunction(item[itemProp]))) {
                $($.ig.tmpl(selectedItemTemplate,
                    {
                        "propertyName": itemProp,
                        "propertyValue": item[itemProp]
                    })
                ).appendTo(tableObject);
            }
        }

        $(function () {

            //  Hide the selected item div and initialize the selected item row template
            $("#itemData").hide();

            $("#combo").igCombo({
                loadOnDemandSettings: {
                    enabled: true,
                    pageSize: 25
                },
                responseDataKey: "d.results.Results",
                responseTotalRecCountKey: "d.results.Count",
                dataSource: "https://www.igniteui.com/api/products?callback=?",
                width: "400px",
                textKey: "ProductName",
                valueKey: "ID",
                virtualization: true,
                autoComplete: true,
                headerTemplate: "<div class='dropDownHeaderFooter'>Available Products</div>",
                footerTemplate: "<div class='dropDownHeaderFooter'>Product Count: {0} / {3}</div>",
                itemTemplate: "<div>${ProductName} (${QuantityPerUnit})</div>",
                placeHolder: "Please, select a product",
                filterExprUrlKey: 'startsWith',
                highlightMatchesMode: "startsWith",
                filteringCondition: "startsWith",
                selectionChanged: function (evt, ui) {
                    //  Clear the selected item table and hide the div
                    $("#table").empty();
                   ...