Статистика сайта с выводом аватара и кнопкой на отправку лс сообщение

<div style="display:none;" id="template">  
  <a href="/index/8-{USERID}" style="text-decoration:none;">
  <table>
  <tbody>
  <tr>
  <td valign="top" style="width: 23px;">
  <div class="avkas rad2 group{USERGROUPID}" style="padding: 3px;">
  <div class="rad2">
  <img src="{USERAVATARURL}" border="0" class="rad2" style="max-width: 20px;" alt="">
  </div>
  </div>
  </td>
  <td style="padding-left: 5px;" valign="top">
  <div style="padding-bottom: 3px;">
  <span class="group{USERGROUPID}"><b>{USERNAME}</b></span>
  </div>
  <div style="color: #9d9d9d;">{USERGROUPNAME}</div>
  </td>
  <td style="width: 32px;">
  <div style="border-left: 1px dotted #ddd; padding: 0 0 0 5px;">
  <div class="wrap-but rad2">
  <a href="/index/14-{USERID}-0-1" target="_blank" class="button rad2">
  <span class="sb rad1" style="padding: 4px 7px 4px 7px;">
  <img src="/statistika/pm.png" border="0" alt="">
  </span>
  </a>
  </div>
  </div>
  </td>
  </tr>
  </tbody>
  </table>
  </a>
  <div style="margin: 5px 0; border-top: 1px solid #ddd;"></div>
</div>
<script type="text/javascript" src="/statistika/stat_1.js"></script>

/* Group Colors */
.group2 {
  background-color: #008b00;
}

.group4 {
  background-color: #b22222;
}

.group1 {
  background-color: #a5a5a5;
}

.group3 {
  background-color: #7b08b7;
}

.group255 {
  background-color: #663300;
}

.group251 {
  background-color: #24afb1;
}

/* Group Text Colors */
span.group2 {
  color: #008b00;
}

span.group4 {
  color: #b22222;
}

span.group1 {
  color: #a5a5a5;
}

span.group3 {
  color: #7b08b7;
}

span.group255 {
  color: #663300;
}

span.group251 {
  color: #24afb1;
}

/* .avkas Styles */
.avkas {
  display: inline-block;
  *display: inline;
  background: rgba(230, 230, 230, 0.65);
  padding: 5px;
  padding-bottom: 6px;
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.25),
  inset 0px 1px 0px 0px rgba(0, 0, 0, 0.12);
}

.avkas div {
  background: #fff;
  padding: 3px;
  display: inline-block;
  *display: inline;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
}

/* Utility Classes */
.rad2 {
  border-radius: 2px;
}

.wrap-but {
  display: inline-block;
  *display: inline;
  background: #e0e0e0 url("/statistika/noize.png") no-repeat padding-box;
  padding: 4px;
  box-shadow: inset 0px 1px 1px -1px rgba(0, 0, 0, 0.17);
}

/* Button Styles */
a.button:link,
a.button:visited {
  text-decoration: none;
  font-size: 11px;
  color: #fff;
  display: inline-block;
  *display: inline;
  border: 1px solid #51708c;
  background: #648aad url("/statistika/noize.png") no-repeat padding-box;
  text-shadow: 0 -1px 0 #597a98;
}

a.button:hover,
a.button:active {
  text-decoration: none;
  color: #fff;
  border: 1px solid #51708c;
  background: #6e96b5 url("/statistika/noize.png") no-repeat padding-box;
}

a.button span.sb {
  display: inline-block;
  *display: inline;
  background: url("/statistika/highlight.png") repeat-x 0 -2px;
  padding: 5px 10px;
}

document.write(`<div id="useridonlines"></div><div id="usernumonline"></div>
<div style="display:none;">
  <div id="useridonline"></div>
  <div id="usergroupid"></div>
  <div id="usergroupname"></div>
  <div id="useravatar"></div>
  <div id="username"></div>
</div>`);

let kolonline = 0;
const xml = $.ajax({ type: 'GET', url: '/api/index/62', dataType: 'xml', async: false }).responseText;
const groupid = $(xml).find('struct:first member:contains("USER_ID") i4').map(function() {
  return $(this).text();
}).get();
kolonline = groupid.length;

$("#useridonline").append(groupid.join(', '));

function useridonline(a) {
  $("#useridonline").html(groupid[a]);
}

let i = 0;

function foruseronline(a) {
  i = a;

  if (i < kolonline) {
  useridonline(i);
  const b = $("#useridonline").html();
  const c = $.ajax({ type: 'GET', url: '/api/index/8-' + b, dataType: 'xml', async: false }).responseText;

  $("#usergroupid").html($(c).find('struct:first member:contains("USER_GROUPID")').find('i4').text());
  $("#username").html($(c).find('struct:first member:contains("USER_USERNAME")').find('string').text());
  $("#useravatar").html($(c).find('struct:first member:contains("USER_AVATAR")').find('string').text());
  $("#usergroupname").html($(c).find('struct:first member:contains("USER_GROUPNAME")').find('string').text());

  const d = $("#usergroupid").html();
  const e = $("#username").html();
  const f = $("#useravatar").html() || '/statistika/noavatar.png'; // Default avatar
  const g = $("#usergroupname").html();

  $("#useridonlines").prepend($("#template").html()
  .replace(/{USERGROUPID}/g, d)
  .replace(/{USERNAME}/g, e)
  .replace(/{USERID}/g, b)
  .replace(/{USERAVATARURL}/g, f)
  .replace(/{USERGROUPNAME}/g, g));

  i++;

  if (i < kolonline) {
  setTimeout(function() { foruseronline(i); }, 1000);
  } else {
  $("#usernumonline").html(
  kolonline === 0 ? 'Нет юзеров.' :
  kolonline === 1 ? 'Всего <b>' + kolonline + '</b> юзер онлайн.' :
  kolonline < 5 ? 'Всего <b>' + kolonline + '</b> юзера онлайн.' :
  'Всего <b>' + kolonline + '</b> юзеров онлайн.'
  );
  }
  }
}

foruseronline(i);