JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="overflow-y: auto;overflow-x: auto;background-color: white; height:500px;width: 900px;"></div>

JavaScript

$(function() {  
//brand series input 
var brandSeries = [
{
  "brandName": "Upsa-C - TV",
  "N": "4",
  "Measures": [
        {
          "name": "Internalised Branding",
          "value": "65.54224996"
        },
         {
          "name": "Non Internalised Branding",
          "value": "1.686625063"
        },
         {
          "name": "No Familiarity",
          "value": "30.83993928"
        },
         {
          "name": "Wrong Familiarity",
          "value": "1.931185697"
        }
    ]
},
{
  "brandName": "Plusssz - TV",
  "N": "4",
  "Measures": [
        {
          "name": "Internalised Branding",
          "value": "52.08225333"
        },
         {
          "name": "Non Internalised Branding",
          "value": "4.907551408"
        },
         {
          "name": "No Familiarity",
          "value": "41.14394332"
        },
         {
          "name": "Wrong Familiarity",
          "value": "1.866251944"
        }
    ]
},
{
  "brandName": "Pharmaton - TV",
  "N": "4",
  "Measures": [
        {
          "name": "Internalised Branding",
          "value": "37.71562552"
        },
         {
          "name": "Non Internalised Branding",
          "value": "2.026461229"
        },
         {
          "name": "No Familiarity",
          "value": "56.20499079"
        },
         {
          "name": "Wrong Familiarity",
          "value": "4.052922459"
        }
    ]
},
{
  "brandName": "Pharmaton - TV",
  "N": "4",
  "Measures": [
        {
          "name": "Internalised Branding",
          "value": "37.71562552"
        },
         {
          "name": "Non Internalised Branding",
          "value": "2.026461229"
        },
         {
          "name": "No Familiarity",
          "value": "56.20499079"
        },
         {
          "name": "Wrong Familiarity",
          "value": "4.052922459"
        }
    ]
},
{
  "brandName": "Pharmaton - TV",
  "N": "4",
  "Measures": [
        {
          "name": "Internalised Branding",
       ...