JSFiddle - React, Tailwind, and code Playground

by suewe

HTML

sample of some data returned:

 {"ROWCOUNT":1, 
"COLUMNS":[ 
"IMAGE_TYPE_REF_ID", 
"ICON", 
"PROD_SUPER_ID", 
"COLOR_ATTRIB","SIZE_ATTRIB", 
"SUPER_DESC","FULL_DESCRIPTION","PRICE","TAXABLE"], 
"DATA {"IMAGE_TYPE_REF_ID": "large"], 
"ICON"["http:/Apps/Product_Mgmt/large/necklace150.jpg"], 
"PROD_SUPER_ID          
":["C-JAY00001"],"COLOR_ATTRIB":[true],"SIZE_ATTRIB":[true],"SUPER_DESC":["3 Stone 
 Womens Quartz 23- inch Necklace"],"FULL_DESCRIPTION": 
["This dainty three-drop quartz pendant 
hangs  on a silver 23 inch chain. Presented in a small black satchel."], 
"PRICE": [10.0000],"TAXABLE":  [true]}}

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <cfsetting showdebugoutput="no">
    <cfquery name="qrySuperProductCategoryInfo" datasource="#request.dsnERP#">
          
            SELECT Distinct dfh_prod_super_category_xref.super_category_ref_id,dfh_prod_super_category_ref.super_category_ref
            
            FROM     dfh_prod_super_tbl
    
                     INNER JOIN dfh_prod_super_category_ref
                                INNER JOIN dfh_prod_super_category_xref
                                  ON dfh_prod_super_category_ref.super_category_ref_id = dfh_prod_super_category_xref.super_category_ref_id
                       ON dfh_prod_super_tbl.prod_super_id = dfh_prod_super_category_xref.prod_super_id
                     INNER JOIN dfh_prod_ext
                       ON dfh_prod_super_tbl.prod_super_id = dfh_prod_ext.prod_super_id
                     INNER JOIN wasptrackinventory.dbo.dfh_erp_website_inventory AS ci
                       ON ci.item_number = dfh_prod_ext.en_prod_key
            WHERE  
                  (dfh_prod_ext.on_web = 1)
                     AND (dfh_prod_super_tbl.on_web = 1)
                     AND ci.currentinventory != 0
                 
            ORDER BY dfh_prod_super_category_ref.super_category_ref

           </cfquery>
    
    
           
       <!---    <cfdump var="#qrySuperProductInfo#">--->
<title>The Store</title>
<cfinclude template="store.css">
<meta charset="utf-8">
<meta name="description" content="Demo of a simple 2 column css layout" />
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
        <script type="text/javascript">


$(document).ready(function() {
    
     $("#StoreForm").dialog({autoOpen:false, width:500, height:500, modal:true});
    ...