Dynamicaly change class name of same class by adding number

Question

One final problem..how to dynamicaly change class name of same instruments by adding number?

<div class="score">
  <div class="system">
    <div class="stff_Flute"></div>
    <div class="stff_Flute"></div>
    <div class="stff_Clarinet"></div>
  </div>
  <div class="system">
    <div class="stff_Flute"></div>
    <div class="stff_Flute"></div>
    <div class="stff_Clarinet"></div>
  </div>
</div>

To this?...

<div class="score">
  <div class="system">
    <div class="stff_Flute_1"></div>
    <div class="stff_Flute_2"></div>
    <div class="stff_Clarinet"></div>
  </div>
  <div class="system">
    <div class="stff_Flute_1"></div>
    <div class="stff_Flute_2"></div>
    <div class="stff_Clarinet"></div>
  </div>
</div>

I have this code https://jsfiddle.net/7cLoxn29/1/ but something is wrong...

Answer 1

I'm not terribly fond of jQuery, so I created a vanilla JS solution for you (hopefully that's OK!):

let parents = document.querySelectorAll(".system")
parents.forEach((parent) => {
  let children = parent.querySelectorAll("div")
  children = Array.from(children).reduce((accumulator, current) => {
    if (current.className in accumulator) {
      accumulator[current.className].push(current)
    } else {
      accumulator[current.className] = [current]
    }
    return accumulator
  }, {})

  for (var key in children) {
    if (children[key].length > 1) {
      children[key].forEach((child, i, target) => {
        child.className = `${child.className}_${i+1}`
      })
    }
  }
})

Note that this is ES2015 JS code.

Here's an updated fiddle: https://jsfiddle.net/7cLoxn29/5/