Nested Template in Underscore.js

Question

In my app I have the following models. Posts have many comments, and comments have many replies.

All data is loaded via AJAX. On the post show page the post is loaded with one request, then comments and replies are loaded with a separate request.

This is the code template for displaying a comment and the related replies:

<script type="text/template" id="js-comment-template">
<li class="list-group-item py-4 comment-list" data-comment-id="<%= id %>">
    <div class="media">
        <div class="avatar avatar-sm">K</div>
        <div class="media-body">
            <div class="mb-2">
                <span class="h6 mb-0"><%= createdBy.firstName + ' ' + createdBy.lastName %></span>
            </div>
            <p>
                <%= comment %>
            </p>
        </div>
    </div>
    <% _.each(replies, function(reply){ %>
        <div class="media">
            <div class="avatar avatar-sm">K</div>
            <div class="media-body">
                <div class="mb-2">
                    <span class="h6 mb-0"><%= createdBy.firstName + ' ' + createdBy.lastName %></span>
                </div>
                <p>
                    <%= reply.reply %>
                </p>
            </div>
        </div>
    <% }); %>
    <div class="media collapse js-create-reply" id="create-reply-<%= id %>">
        <div class="media-body">
            {{ include('reply/_form.html.twig')}}
        </div>
    </div>
</li>
</script>

This is all working fine, however if I want to add a reply dynamically I need to have a reply in a separate Underscore template. But if I try to add a script tag around the reply section I get the following error:

Uncaught SyntaxError: missing ) after argument list
at new Function (<anonymous>)

Any idea how I can resolve this so that replies can be added dynamically?

Many thanks for your advice...