Nested ui:repeat conditional counter - jsf

Question

JSF 2.1
I am attempting to build some div tags conditionally.
The div tags must have the following format for their DOM id -
jquery_jplayer_# // where # is an integer
Additional requirements:
The resultant HTML should look like this -
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
.
.
.
</div>
<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;">
.
.
.
</div>
Here is what my current code that is attempting to do this looks like:
<ui:repeat value="#{accessibilityTagging.previewTagsOrderByCurrentlySelectedOrderType}" var="currentTag" varStatus="loop_1">
<ui:repeat value="#{accessibilityTagging.accessibilityElements}" var="accessibilityElement" varStatus="loop_2">
<ui:repeat value="#{accessibilityElement.featureList}" var="feature" varStatus="loop_3">
<h:panelGroup rendered="#{feature.feature eq 1">
<!-- some irrelevant stuff happening here -->
</h:panelGroup>
<h:panelGroup rendered="#{feature.feature eq 2}">
<!-- relevant stuff happens here! -->
<div id="jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-jplayer"></div>
<div id="jp_container_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3: "#{ttsManager.serverURL}/TTSServlet?text="+encodeURI('#{feature.info}')
});
},
swfPath: "/common/js",
supplied: "mp3, m4a, oga",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: false,
toggleDuration: false,
errorAlerts: true
});
});
//]]>
</script>
</h:panelGroup>
</ui:repeat>
</ui:repeat>
</ui:repeat>
There are two problems a with what I have:
The innermost loop resets the varStatus back to 0 after it finishes iterating.
The varStatus index value starts with 0. I need it to start at 1.
Any suggestions on how to tackle this problem?
(Is there a way that I store the current counter in a variable or hidden field?)
I do not want to use JSTL (e.g. <c:set> as this will mix JSF components with JSP).