Несколько скриптов или один? Может ли он поддерживать дубликаты?

Я создаю систему, чтобы я мог обновлять статистику игроков на лету. Весь мой код работает, даже встроенный, поэтому статистика может иметь максимальное значение выше 100, а полоса все еще работает в процентах.

Я даже получил его, чтобы иметь несколько баров (см. закомментированный код), но затем я обнаружил проблему, если я обновлял одно поле, оно брало процент для этого и обновляло другое, они должны обновляться независимо друг от друга.

Сначала я собирался стиснуть зубы и просто сделать 3 очень похожих функции: одну для здоровья, одну для брони и одну для энергии. Но так как у меня есть 5 игроков, и я хочу, чтобы одна страница обновляла их всех, это означало бы создание 15 скриптов, которые действительно избыточны.

Я надеюсь, что вы поможете мне найти способ «шаблона» системы, чтобы у меня было «неограниченное количество» игроков и только одна функция для обновления любого из них.

Чтобы было проще увидеть, я настроил JSfiddle: https://jsfiddle.net/nekollx/7o3bdwyt/3/

В сторону: я только что заметил по какой-то причине, когда вы открываете скрипку, она не показывает CSS, поэтому она включена ниже

      body {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
      }

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 4px;
}

      .CharInfo {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
        filter: progid: dximagetransform.microsoft.basicimage(rotation=2);
        font-weight: bolder;
        color: white;
        -webkit-text-stroke: 0.05em #000;
        font-size: x-large;
        padding: 0px 0px 0px 10px;
      }

      .line {
        width: 200px;
      }

      .stripesLoader {
        margin: 4px;
        height: 30px;
        position: relative;
        background: linear-gradient(90deg, #eee 50%, transparent 50%);
        background-color: crimson;
        background-size: 200%;
        background-position: 80%;
        width: 50%;
        border-radius: 5px;
        transform: scale(-1);
        transition: 0.3s;
      }

      .stripesLoader: before {
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        border-radius: 5px;
        background:
        linear-gradient(
          45deg,
          transparent 25%,
          rgba(238, 238, 238, 0.5) 25%,
          rgba(238, 238, 238, 0.5) 30%,
          transparent 30%,
          transparent 35%,
          rgba(238, 238, 238, 0.5) 35%,
          rgba(238, 238, 238, 0.5) 70%,
          transparent 70%
        );
        animation: shift 2s linear infinite;
        background-size: 60px 100%;
        box-shadow:
          inset 0 0px 1px rgba(0, 0, 0, 0.2),
          inset 0 -2px 1px rgba(0, 0, 0, 0.2);
      }

      @keyframes shift {
        to {
          background-position: 60px 100%;
        }
      }