Edit in JSFiddle

$(function () {

    var appendToDiv = $("#myTable");

    var myJSONData = [
            Id: "X",
            Title: "Square",
            Color: "Orange",
            Count: 1
        }, {
            Id: "Y",
            Title: "Circle",
            Color: "Red",
            Count: 2
        }, {
            Id: "Z",
            Title: "Triagle",
            Color: "Green",
            Count: 3

    $.each(myJSONData, function (i, dataRow) {

        // Make a copy template found within this page
        var myRowHTML = $("#myRowTemplate").html(); // grab HTML and not the DOM Object so that we can create a "copy" of it;

        // Replace any "pre-defined variables" via global search and replace.  
        // IMPORTANT we need to do this first before we convert string into DOM object, because some of these "pre-defined variables" may be part of IDs
        myRowHTML = myRowHTML.replace(/ROWID/g, dataRow.Id + "Row");
        myRowHTML = myRowHTML.replace(/FIRSTCELLID/g, dataRow.Id + "Cell");

        // Convert string into DOM object
        var myRow = $(myRowHTML);

        // Find objects within template to replace values

        // Now append our template to final destination

        if (i == (myJSONData.length - 1)) {
            // if last item


<!-- Template will be "hidden" -->
<div id="myRowTemplate" style="display:none;">
    <div class="row" id="ROWID">
        <div class="col-md-6 myTitle" id="FIRSTCELLID"></div>
        <div class="col-md-6 myColor"></div>
        <div class="col-md-6 myCount"></div>

<h1><b><a target="_blank" href="https://twitter.com/yesi79">@yesi79's</a> Alternartive to JQuery Template Plugins</b></h1>

<p>Right Click and Inspect Element on an Item to see the updated values for ROWID and ITEMID:</p>
<div class="container">
    <div class="row">
        <div class="col-md-6"><b>Name</b>
        <div class="col-md-6"><b>Color</b>
        <div class="col-md-6"><b>Count</b>
    <div id="myTable"></div>
h1 {

/* Placing this here because JFiddle does not load Bootstrap correctly */
 .col-md-6 {
    display: inline-block;