JSFiddle - React, Tailwind, and code Playground

by Gary Scott

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
    <div id="box"></div>
</div>

JavaScript

var box = $("#box");




var gList = [{
    "g": "j"
}, {
    "g": "l"
}];



box.append(panel("leroy", gList));







function panel(name, mylist) {

    var panel = $('<div class="panel panel-default">');
    var panelHeading = $('<div class="panel-heading">').html(name);
    var body = $('<div class="panel-body">');

    panel.append(panelHeading);
    panel.append(body);
    
    body.append(list(mylist));
    return panel;

}

function list(list) {
    //debugger;
    var dl = $('<dl>');
    var dt = $('<dt>').html("title");
    dl.append(dt);

    $.each(list, function (key, value) {
        var dd = $('<dd>').html(value.g);
        
        
        dl.append(dd);
    });

    return dl;

}