JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script data-template="simple" type="text/x-dot-template">
	<strong>Beg siple</strong><br>
	{{~it.level1 :element:index}}
		{{=element.name}}<br>
	{{~}}
  <strong>End simple</strong>
</script>

<script data-template="complex" type="text/x-dot-template">
	<strong>Beg complex</strong><br>
	{{~it.level1 :group:index}}
  	{{=group.name}}<br>
    {{~group.data :element:index}}
    	{{=element.name}}<br>
    {{~}}
	{{~}}
  <strong>End complex</strong>
</script>

<div id="output_simple">

</div>
<div id="output_complex">

</div>

JavaScript

$(document).ready(function() {
	var data_simple = {
  	level1: [
    	{ name: 't1' },
    	{ name: 't2' },
    	{ name: 't3' }
    ]
  };
  
	var data_complex = {
  	level1: [
    	{ 
      	name: 'g1', 
        data: [
    			{ name: 't11' },
    			{ name: 't12' },
    			{ name: 't13' }
    		]
    	},
    	{ 
      	name: 'g2', 
        data: [
    			{ name: 't21' },
    			{ name: 't22' },
    			{ name: 't23' }
    		]
    	}
    ]
  };
  
	var compiled_tpl_simple = doT.template($('[data-template="simple"]').html());
	var compiled_tpl_complex = doT.template($('[data-template="complex"]').html());
  var result_simple = compiled_tpl_simple(data_simple);
  var result_complex = compiled_tpl_complex(data_complex);
  
  $('#output_simple').append(result_simple);
  $('#output_complex').append(result_complex);
});