JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<script type="text/html" id="template">
  {{#each filters}}
  <div class="hidden-filter-controls-label">Filter by <span>{{[name]}}</span></div>
  <div class="hidden-filter-controls-filter-container">
    <div class="hidden-filter-controls-filter-wrapper">
      <fieldset data-filter-group>
        {{#each [data]}}
        <div class="btn hidden-filter-controls-filter" data-filter="{{../name}}" data-value="{{[name]}}">{{[name]}}</div>
        {{/each}}
      </fieldset>
    </div>
  </div>
  {{/each}}
</script>
<pre id="debug"></pre>

JavaScript

var data = { filters: [{ name: 'a', data: [ { name: 1 } ] }] };
var src = document.querySelector('#template').innerHTML;
var tpl = Handlebars.compile(src);
document.querySelector('#debug').innerHTML = tpl(data);