Multiple Scripts or one? Can it suport duplicates?

Question

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.

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.

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

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

To make things easier to see I set up a JSfiddle: https://jsfiddle.net/nekollx/7o3bdwyt/3/

Aside: I just noticed for some reason when you open the fiddle it doesn't show the CSS so it's included below

      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%;
        }
      }

Answer 1

Ok, I think I've got your answer!

So basically you need to work around with your id's, so you can make a single script for all the players/attributes.

1. I've wrapped your player with a div: <div id='player0'>

2. I've changed your jqvalue to be separated for each HP,Armour and Energy (jqValueHP, jqValueArmor, jqValueEnerg)

3. Created a playerclone function that will clone your player0 div and change his id's for the next index.

4. Add a button to create more players that will call the playerclone and increment the player counter.

Here is the fiddle!

EDIT: I've made a new fiddle for the xxx and yyyfields here. Do note that the field xxx will always have the value you set for the first player for any other player (since we're cloning the div).

In terms of the animation, it seems fine to me. The fiddle you linked had no CSS so its normal it doesn't show animations...

Answer 2

Since the progress element seems to be the element that precedes the corresponding input element, you could use jQuery's prev method.

I did not test this, but something like this:

function update(target) {
    var $progress = $(target).prev();
    // ...

    $progress.css('backgroundPosition', valeur+'%');

    if (valeur <= 25){
        $progress.css('backgroundColor', 'red');
    } 
    // .... etc
}