JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="QuestionsDiv">Data comes here
                <script id="QuestionTemplate" type="text/html">
                    <div class="fullWidthDiv">
                        <div class="fullWidthDiv">
                            <span class="sixPercentWidth boldFont">Id</span>
                            <span class="thirtyPercentWidth boldFont">Obj</span>
                            <span class="twentyfivePercentWidth boldFont">Item</span>
                        </div>
                        {#foreach $T as quesDetails begin = 0}
                        <div id="questionDetailsDiv" class="fullWidthDiv">
                            <input type="hidden" id="questionIdHidden" value="{$T.quesDetails.Id}"></input>
                            <span class="sixPercentWidth"><a href="#" class="questionToEdit">{$T.quesDetails.Obj}</a></span>
                            <span class="thirtyPercentWidth overflowAuto"><label>{$T.quesDetails.Item}</label></span>
                        </div>
                        {#/for}
                    </div>
                </script>

            </div>

JavaScript

var data = [
  {
    "Id": 6,
    "Obj": "23",
    "Item": "Name"
  },
  {
    "Id": 7,
    "Obj": "29",
    "Item": "Other name"
  }
];
(function(data) {
        $("#QuestionsDiv").html('');
        var template = $("#QuestionTemplate").html();
        if (data) {
            $("#QuestionsDiv").setTemplate(template, null, { filter_data: false });

        }
        $("#QuestionsDiv").processTemplate(data);

})(data);