JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div id="abc">

 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Hatch</button><ul class="dropdown-menu">
                  <li><a href="#">Hatch names here one below the other</a></li>
                  <li><a href="#">Next Hatch name here</a></li>
                  <li><a href="#">Next Hatch name here</a></li>
                  </ul>
              </div><!-- /btn-group -->


 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sedan</button><ul class="dropdown-menu">
                  <li><a href="#">Sedan names here one below the other</a></li>
                  <li><a href="#">Next Sedan name here</a></li>
                  <li><a href="#">Next Sedan name here</a></li>
                  </ul>
              </div><!-- /btn-group -->

 <!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">SUV</button><ul class="dropdown-menu">
                  <li><a href="#">SUV names here one below the other</a></li>
                  <li><a href="#">Next SUV name here</a></li>
                  <li><a href="#">Next SUV name here</a></li>
                  </ul>
              </div><!-- /btn-group -->


</div>


<div id="show"><!-- Show the content related to the item clicked in either of the lists here --></div>

JavaScript

var json = {
    "Hatch": [
        {
            "name": "Fiesta",
            "price": "1223",
            "maker": "Ford"
        },
        {
            "name": "Polo",
            "price": "3453",
            "maker": "VW"
        }
    ],
    "Sedan": [
        {
            "name": "Mustang",
            "price": "1223",
            "maker": "Ford"
        },
        {
            "name": "Jetta",
            "price": "3453",
            "maker": "VW"
        }
    ],
    "SUV": [
        {
            "name": "Santa Fe",
            "price": "1223",
            "maker": "Hyundai"
        },
        {
            "name": "Evoque",
            "price": "3453",
            "maker": "Land Rover"
        }
    ]
};
$('#abc').on('click','button',function(){
    var buttonVal = $(this).html();
    var ul = $(this).siblings();
    $(ul).empty();
    $.each(json[buttonVal],function(i, v){
        $(ul).append('<li><a href="#" >'+v.name+'</a></li>');
        var li = $(ul).children()[i];
        $(li).data(v);       
    });   
});
$('#abc').on('click','a',function(){
    $('#show').empty();
    var car = $(this).parent();
    var cardata = $(car).data();
    $('#show').html(cardata.name+' : '+cardata.price+' : '+cardata.maker);
});