JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<div class='column-header clearfix' data-head-ref='region'>
    <div class='header-inner'><span class='header-inner-title-dos'>Region</span>

    </div>
    <div class='level-two' data-head='Nort'><span class='title'>Nort</span>

        <div class='level-three' data-option='EEUU'><span class='title'>EEUU</span>

        </div>
        <div class='level-three' data-option='Canada'><span class='title'>Canada</span>

        </div>
        <div class='level-three' data-option='Mexico'><span class='title'>Mexico</span>

        </div>
    </div>
    <div class='level-two' data-head='Sout'><span class='title'>Sout</span>

        <div class='level-three' data-option='Venezuela'><span class='title'>Venezuela</span>

        </div>
        <div class='level-three' data-option='Ecuador'><span class='title'>Ecuador</span>

        </div>
        <div class='level-three' data-option='Argentina'><span class='title'>Argentina</span>

        </div>
        <div class='level-three' data-option='Colombia'><span class='title'>Colombia</span>

        </div>
        <div class='level-three' data-option='Uruguay'><span class='title'>Uruguay</span>

        </div>
    </div>
    <div class='level-two' data-head='Center'><span class='title'>Center</span>

        <div class='level-three' data-option='Panama'><span class='title'>Panama</span>

        </div>
        <div class='level-three' data-option='Guatemala'><span class='title'>Guatemala</span>

        </div>
        <div class='level-three' data-option='Honduras'><span class='title'>Honduras</span>

        </div>
        <div class='level-three' data-option='Costa Rica'><span class='title'>Costa Rica</span>

        </div>
    </div>
</div>
<div class='column-header clearfix' data-head-ref='Brands'>
    <div class='header-inner'><span class='header-inner-title-dos'>Brands</span>

    </div>
    <div class='level-two' data-head='Food'><span class='title'>Food</span>

        <div class='level-three' data-option='Pizza...

CSS

.column-header {
    background: #d3d3d3;
    width: 50%;
    float: left;
    border: 1px solid #222;
}
.header-inner {
    background: grey;
    color: #fff;
    text-transform: uppercase;
}
.level-two, .level-three {
    float: left;
}
.level-two {
    width: 33.333%;
    border: 1px solid #444;
}
.level-two .title {
    display: block;
    background: #f1f1f1;
}
.level-three .title {
    background: gold;
    border: 1px solid #333;
    padding: 5px;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
* html .clearfix {
    zoom: 1;
}
/* IE6 */
 *:first-child+html .clearfix {
    zoom: 1;
}
/* IE7 */

JavaScript

var customArray =[];
$('[data-head-ref]').each(function(){
     var Items = ""; 
     $("[data-head]", this).each(function(){
        if(Items.lenth!=0){Items +=",";}
        Items +=$(this).attr("data-head");
     });

     customArray[$(this).attr('data-head-ref')] =  {
             'numberItems': $("[data-head]", this).length, 
             'nameItems': Items}; 
        
    console.log('Número de Items :'  + customArray['region']['numberItems'] + '\n' + 'Hijos :' + customArray['region']['nameItems']);
});