JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<a href="#" id="go">Mustache GO!</a>
<div id="cnt"> </div>

CSS

body {padding: 10px;}
#go { display: block; margin-bottom: 5px; border-radius: 3px; background: red; padding: 3px; color: #fff;}
#cnt { background: #ccc; width: 100%; min-height: 100px;}

JavaScript

var data = {
            "0": {
                "Dosage": "25",
                "Drug": "Indocin",
                "Patient": "David",
                "Date": "15/11/2012 14:29:14"
            },
            "1": {
                "Dosage": "50",
                "Drug": "Enebrel",
                "Patient": "Sam",
                "Date": "15/11/2012 14:29:14"
            },
            "2": {
                "Dosage": "10",
                "Drug": "Hydralazine",
                "Patient": "Christoff",
                "Date": "15/11/2012 14:29:14"
            },
            "3": {
                "Dosage": "21",
                "Drug": "Combivent",
                "Patient": "Janet",
                "Date": "15/11/2012 14:29:14"
            },
            "4": {
                "Dosage": "100",
                "Drug": "Dilantin",
                "Patient": "Melanie",
                "Date": "15/11/2012 14:29:14"
            }
        };

$('#go').click(function() {
var template = "<p>{{Drug}}</p>";
for (var i = 0, drug; (drug = data[i]); ++i) {
  var html = Mustache.to_html(template, drug);
  $(html).appendTo("#cnt");
}


});