how to access jelly variable from javascript on service now

I have below requrement on SNOW

I am trying to generate a set of records of say incident on UI page through gelly script and try to show the time elapsed from the creation date of the record on a column on each record. I am using while loop on jelly but it is printing the value only for the first record. The rest of the records are not printing the new column value.

I want to have a variable on jelly and access from JS. As here demo/ demo1 are static they are getting overriden each time and I am getting value for one record only.

PFB the script of UI page:

also PFA screen shot. Screenshot

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <g2:evaluate var="jvar_inc">
      var inc = new GlideRecord('incident');
      inc.addActiveQuery();
      inc.addQuery('priority',1);
      inc.setCategory('homepage');
      inc.query();
   </g2:evaluate>
   <table border="0" cellspacing="2" cellpadding="0" width="100%">
      <j2:while test="$[inc.next()]">
         <j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
         <j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>
         <tr>
            <td>
               <a href="$[jvar_inc_link]">
               <span style="padding-right:10px;"><IMG SRC="images/icons/incidents.gifx"/></span>
               </a>
               <a href="$[jvar_inc_link]" class="linked" style="padding-right:10px;">$[inc.number]</a>
            </td>
            <td>$[inc.short_description]</td>
            <td>
               <p id="demo1">$[inc.sys_created_on]</p>
            </td>
            <td>
               <p id="demo"></p>
               <script>
                  var myVar = setInterval(myTimer ,1000);
                  function myTimer() {
                      var d2 = new Date(document.getElementById("demo1").innerHTML);
                          var d = new Date();

                          var d11 = d.getTime();
                          var d22 = d2.getTime();

                          var time = (d11 - d22)/1000;

                          var min = Math.floor(time / 60);
                          var sec = time - min * 60;
                          var hh = Math.floor(min / 60);
                          min = min - hh * 60;
                          var day = Math.floor(hh / 24);
                          hh = hh - day * 24;


                          document.getElementById("demo").innerHTML = day+' : '+hh+' : '+min+' : '+Math.floor(sec);
                  }

               </script>
            </td>
         </tr>
      </j2:while>
      <tr>
         <td align="center" colspan="2"><a href="$[jvar_inc_list_link]" class="linked">${gs.getMessage("View all active Incidents")}</a></td>
      </tr>
   </table>
</j:jelly>

Try below code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <g2:evaluate var="jvar_inc">
      var inc = new GlideRecord('incident');
      inc.addActiveQuery();
      inc.addQuery('priority',1);
      inc.setCategory('homepage');
      inc.query();
   </g2:evaluate>
   <table border="0" cellspacing="2" cellpadding="0" width="100%">
   <script>
   var i = 1;
   var randomId;
   </script>
      <j2:while test="$[inc.next()]">
         <j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
         <j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>
         <tr>
            <td>
               <a href="$[jvar_inc_link]">
               <span style="padding-right:10px;"><IMG SRC="images/icons/incidents.gifx"/></span>
               </a>
               <a href="$[jvar_inc_link]" class="linked" style="padding-right:10px;">$[inc.number]</a>
            </td>
            <td>$[inc.short_description]</td>
            <td>
               <script>
                document.write('<p id="demos'+i+'">$[inc.sys_created_on]</p>');
                   </script>
            </td>
            <td>
            <script>
                document.write('<p id="demo'+i+'" ></p>');
            </script>

               <script>

                  //var myVar = setInterval(myTimer ,1000);
                   myTimer();
                  function myTimer() {

                      var d2 = new Date(document.getElementById("demos"+i).innerHTML);
                          var d = new Date();

                          var d11 = d.getTime();
                          var d22 = d2.getTime();

                          var time = (d11 - d22)/1000;

                          var min = Math.floor(time / 60);
                          var sec = time - min * 60;
                          var hh = Math.floor(min / 60);
                          min = min - hh * 60;
                          var day = Math.floor(hh / 24);
                          hh = hh - day * 24;

                   randomId = "demo"+i;
                   console.log(randomId);
                          document.getElementById(randomId).innerHTML = day+' : '+hh+' : '+min+' : '+Math.floor(sec);
                  }
i++;
               </script>
            </td>
         </tr>
      </j2:while>
      <tr>
         <td align="center" colspan="2"><a href="$[jvar_inc_list_link]" class="linked">${gs.getMessage("View all active Incidents")}</a></td>
      </tr>
   </table>
</j:jelly>