JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<div id="output"></div>

<script type="text/template" id="template">
{{#each names}}
  {{position}}
  {{name}}
{{/each}}
</script>

JavaScript

$(function() {
    var data = {
        names: [
            { name: "Andrew" },
            { name: "Brian" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
            { name: "Charlie" },
        ]
    };
    
    var positionCounter = 1;
    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

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

    var template = Handlebars.compile(source);    
    var html = template(data);
    
    $output.html(html);        
});