JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<script id="test" type="script/x-jquery-tmpl">
    <div>
    <h1>${name}</h1>
    <p>${description}</p>
    <div class="progressbar"></div>
    </div>
</script>
<script id="test2" type="script/x-jquery-tmpl">
    <h1>${name}</h1>
    <p>${description}</p>
    <div class="progressbar"></div>
</script>
<div id="here"></div>

CSS

h1 { font-size: 36px }
p { color: gray }
.progressbar { width: 100px; height: 10px; }

JavaScript

$(function() {
    var data = {name: 'Hello', description: 'World', value:50};
    var data2 = {name: 'JavaScript' ,description: 'Rules', value: 80};
    var $tmpl = $('#test').tmpl(data);
    
    $tmpl.find('.progressbar').progressbar({value:data.value});    
    $tmpl.appendTo('#here');   
    
    var tmpl2 = $('#test2').tmpl(data2);
    tmpl2.find('.progressbar').progressbar({value:data2.value}); // not working
    tmpl2.appendTo('#here');

});