JSFiddle - React, Tailwind, and code Playground

by tweissin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
 <div class="list-group">
     Click to expand
            </div>

<script id="item-template" type="text/x-handlebars-template">
  <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">{{heading}}<b class="caret"></b></h4>
                <p class="list-group-item-text">{{text}}</a>
</script>

JavaScript

$(function() {
    console.log("page loaded");
    
    
    
    $(".list-group").click(function() {
        console.log("clicked");
        var source   = $("#item-template").html();
        var template = Handlebars.compile(source);
        
        var data = [
            {heading:"List group item heading 1",text:"Lorem ipsum 1"},
            {heading:"List group item heading 2",text:"Lorem ipsum 2"}
        ];
        
        for( var i=0; i<data.length; i++ ) {
            console.log(data[i]);
            $(".list-group").append(template(data[i]));
        }
    });
    

});