title: Multiple Scripts or one? Can it suport duplicates?
body: <p>I'm building a system so I can update the player stats on the fly. Got all my code working even built it out so the stats can have a max higher then 100 and the bar still works as a percentage.</p>
  
  <p>I even got it so I could have multiple bars (see commented out code), but then I discovered a problem if I updated one filed it would take the percentage for that and update the other, they need to update independently of each other.</p>
  
  <p>As first I was going to bite the bullet and just make 3 very similar functions: One for HP, one for armor, one for energy. But since I have 5 players and I want to have one page top update them all that would mean making 15 scripts that are really redundant</p>
  
  <p>I'm hoping you can help me find a way to "template" the system so I can have "unlimited" players and just one function to update any of them</p>
  
  <p>To make things easier to see I set up a JSfiddle: <a href="https://jsfiddle.net/nekollx/7o3bdwyt/3/" rel="nofollow noreferrer">https://jsfiddle.net/nekollx/7o3bdwyt/3/</a></p>
  
  <p>Aside: I just noticed for some reason when you open the fiddle it doesn't show the CSS so it's included below</p>
  
  <pre><code>      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%;
          }
        }
  </code></pre>