I have a repeating section and in the repeating section I have a repeating grid layout. In one of the columns of the grid layout I have a jqtimepicker control being fired. During runtime, it works fine on the first section being added but when I add a new section/row it does not seem to be firing the refresh on change activity. I am using the following code for the jqtimepicker:

<pega:onlyonce name="jqTimePicker">
<pega:static app="webwb" type="script">
<pega:file name="jquery.timepicker.min.js" />
</pega:static>
</pega:onlyonce >

<pega:when test="!$mode-input">
<pega:reference name="$this-value" />
</pega:when>

<pega:when test="$mode-input">
<script type="text/javascript">
(function($) {
$(function() {
$('input.timepicker').timepicker(
{dropdown:false});
});
})(jQuery);
</script>
<%
int idx = -1;

try {
ClipboardProperty parentProp = tools.getActive().getParentProperty();
idx = parentProp.indexOf();
} catch(Exception e) {
idx = -1;
}
%>

<script type="text/javascript">
$(document).ready(function(){
$("#"+"<pega:reference name="$this-definition(.pyPropertyName)"/><%=idx%>").change(function(event){
<pega:when java="<%= !tools.getParamValue("OnChangeActivity").equals("")||tools.getParamValue("RefreshOnChange").equals("-1") %>">
handleClientEvent('SERVER','<%= tools.getParamValue("OnChangeActivity") %>','<%= tools.getParamValue("ActivityParams") %>',<%=idx%>,event);
</pega:when>
});

});
</script>

<% String errMessages= tools.getActive().getMessages();
errMessages.replaceAll("'","\"");
%>
<input <pega:include name="ClientValidation" />
type="text"
id="<pega:reference name="$this-definition(.pyPropertyName)"/><%=idx%>"
class="timepicker"
style="width:<%= tools.getParamValue("width") %>px"
name="<pega:reference name="$this-name" />"
value="<pega:reference name="$this-value" />"
>
<%
if(errMessages!=""){
%>
<pega:when name='hasMessages'>

<div class="iconErrorDiv dynamic-icon-error-div">
<SPAN class="iconError dynamic-icon-error" errID="" id="PegaRULESErrorFlag"> <%=errMessages%> </SPAN>
</div>
</pega:when>
<% } %>
</pega:when>

Would anyone know why it does not want to fire on the succeeding sections/row being added?

Thank you.

***Moderator Edit: Vidyaranjan | Updated Categories***