JSFiddle - React, Tailwind, and code Playground

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
  <script id="template" type="text/html">
  <div style="border:1px solid silver; float:left; min-height:55px; width:500px;background-color:white;margin:5px 1px 1px 1px; display:none;">
  {CostTypeName}-{Quantity}-{ServicePeriodEndDate}
  </div>
      </script>
      
      <a id="lnkGetServiceCharges" class="btn icon-btn btn-primary" href="#" style="font-size:20px;">
                    <span class="glyphicon btn-glyphicon glyphicon-save img-circle text-primary"></span>
                  Click to Run Demo &nbsp;  &nbsp;  &nbsp;
</a>
      
      <div id="divContainer">
      
      </div>
      
      
</body>

CSS

.practice-textwidth {
            width:300px;
            max-width:300px;
        }

        .btn-glyphicon {
            padding:15px;
            background:#ffffff;
            margin-right:4px;
        }
        .icon-btn {
            padding: 1px 15px 3px 2px;
            border-radius:30px;
        }

JavaScript

var result =[{"CostTypeName":" Cost1","Quantity":1.00,"ServicePeriodEndDate":"\/Date(1514678400000)\/"},{"CostTypeName":"Cost2","Quantity":0,"ServicePeriodEndDate":"\/Date(1488499200000)\/"},{"CostTypeName":"Cost3","Quantity":2,"ServicePeriodEndDate":"\/Date(1488499200000)\/"}
]

var template = $('#template').html();

function render(template, data) {
  var patt = /\{([^}]+)\}/g;
  return template.replace(patt, function(_, key) {
    return data[key];
  });
}

  $(document).ready(function() {

            $("#lnkGetServiceCharges").click(function (event) {
                fireDemo();
                event.preventDefault();
            });

        });
        
function fireDemo()
{
  $.each(result, function(index,item) 
  {        
      //alert(item.CostTypeName);
      var divRef = render(template, item);
      $(divRef).appendTo('#divContainer').show('slow');
  });
}