Nested Underscore.js Templates

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<button class="change-inner-fail">change inner fail</button>
<button class="change-inner">change inner</button>
<button class="change-inner-inner">change inner inner</button>

<script type="text/template" id="outer-tpl">
    <ul>
        <% _.each(data, function(item) { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
    <ul class="inner-fail"></ul>
    <ul class="inner">
        <ul class="inner-inner"></ul>
    </ul>
    
    <script type="text/template" id="inner-tpl-fail">
        <% _.each(data, function(item) { %>
            <li>Inner Item (fails): <%= item %></li>
        <% }); %>
    <%= "</script\>" %>
    
    <script type="text/template" id="inner-tpl">
        <%= "<% _.each(data, function(item) { %\>" %>
            <li>Inner Item: <%= "<%= item %\>" %></li>
        <%= "<% }); %\>" %> <!--  -->
        <script type="text/template" id="inner-inner-tpl">
            <%= "<%= \"<% _.each(data, function(item) { %\\>\" %\>" %>
                <li>Inner Inner Item: <%= "<%= \"<%= item %\\>\" %\>" %></li>
            <%= "<%= \"<% }); %\\>\" %\>" %>
        <%= "</script\>" %>
    <%= "</script\>" %>
</script>

JavaScript

Xvar data = ['outer-1', 'outer-2'];
var data2 = ['inner-1', 'inner-2', 'inner-3'];
var data3 = ['innerInner-1', 'innerInner-2', 'innerInner-3', 'innerInner-4'];

var outerTpl = _.template($('#outer-tpl').html());
$('body').append(outerTpl({data: data}));

var innerTplFail = _.template($('#inner-tpl-fail').html());
var innerFailHtml = innerTplFail({data: data2});
$('.inner-fail').append(innerFailHtml);

var innerTpl = _.template($('#inner-tpl').html());
var innerHtml = innerTpl({data: data2});
$('.inner').prepend(innerHtml);

var innerInnerTpl = _.template($('#inner-inner-tpl').html());
var innerInnerHtml = innerInnerTpl({data: data3});
$('.inner-inner').html(innerInnerHtml);


// Handlers for the buttons
$('.change-inner-fail').click(function() {
    innerFailHtml = innerTplFail({data: _.sample(_.range(), 3)});
    $('.inner-fail').html(innerFailHtml);
    $('.inner-fail').append('<li>Didn\'t work!</li>');
});
$('.change-inner').click(function() {
    innerHtml = innerTpl({data: _.sample(_.range(100), 4)});
    $('.inner > li, .inner > script').remove();
    $('.inner').prepend(innerHtml);
});
$('.change-inner-inner').click(function() {
    innerInnerHtml = innerInnerTpl({data: _.sample(_.range(100), 5)});
    $('.inner-inner').html(innerInnerHtml);
});