Using Custom Code Inside a Collection List won't let me use getElementById properly

[YFNAcademy (Ivan Koretskyy)]

I have a leaderboards page for student’s to view and compare stats. Since I’m running low on custom fields for my CMS, I use one custom field that’s an array to collect most data I need.

In the leaderboards is a collection list of all students ranked from highest to lowest. I’m using an embed in their collection item to list their physical stats. The problem is that when I use getElementById to write the array data to a specific text, it will only do one of the collection items and the rest remain blank.

Even when I used a custom field to make each ID to have unique ID for each collection item, it still wouldn’t work. I’m looking for alternatives for me to show the array data on the text and to make sure it works on ALL collection items, not just one.

Collection Item Embed Code:

<div class="leaderboard-stats">
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e432d1ecde5c3f22c77f_YFN%20Academy%20Icons%20%5BRecovered%5D-70.svg">
    <p class="skill-level" id="agility{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43b1f032e18224ddcb0_YFN%20Academy%20Icons%20%5BRecovered%5D-65.svg">
    <p class="skill-level" id="clarity{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e44143a073449650263c_YFN%20Academy%20Icons%20%5BRecovered%5D-67.svg">
    <p class="skill-level" id="coordination{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e441157c55aa3e0c7006_YFN%20Academy%20Icons%20%5BRecovered%5D-69.svg">
    <p class="skill-level" id="endurance{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e436d98188269155b783_YFN%20Academy%20Icons%20%5BRecovered%5D-62.svg">
    <p class="skill-level" id="flexibility{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43443a073761b502520_YFN%20Academy%20Icons%20%5BRecovered%5D-58.svg">
    <p class="skill-level" id="patience{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
      <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e436d1ecde0e7622c78d_YFN%20Academy%20Icons%20%5BRecovered%5D-61.svg">

      <p class="skill-level" id="power{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
        </p>
      </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43f19c92c30714fac5d_YFN%20Academy%20Icons%20%5BRecovered%5D-66.svg">
    <p class="skill-level" id="quickness{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43643a073e051502559_YFN%20Academy%20Icons%20%5BRecovered%5D-60.svg">
    <p class="skill-level" id="discipline{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43d5bacad237a3d81da_YFN%20Academy%20Icons%20%5BRecovered%5D-63.svg">
    <p class="skill-level" id="speed{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e4411f032ee8ab4ddd35_YFN%20Academy%20Icons%20%5BRecovered%5D-68.svg">
    <p class="skill-level" id="stability{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e4348a9d051735bc5805_YFN%20Academy%20Icons%20%5BRecovered%5D-57.svg">
    <p class="skill-level" id="stamina{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e43b2ac12c6904cd9612_YFN%20Academy%20Icons%20%5BRecovered%5D-64.svg">
    <p class="skill-level" id="strength{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  <div class="skill-stat-group">
    <img class="leaderboard-skill" src="https://uploads-ssl.webflow.com/6136fb2c901e59c517d78526/63b3e436196e1852f9ba6302_YFN%20Academy%20Icons%20%5BRecovered%5D-56.svg">
    <p class="skill-level" id="toning{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">0
      </p>
    </div>
  </div>
  
  <script>
  const skillsetArray = [{{wf {&quot;path&quot;:&quot;skill-points-array&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}];
  
  var agility = skillsetArray[0];
  var clarity = skillsetArray[1];
  var coordination = skillsetArray[2];
  var endurance = skillsetArray[3];
  var flexibility = skillsetArray[4];
  var motivation = skillsetArray[5];
  var patience = skillsetArray[6];
  var power = skillsetArray[7];
  var quickness = skillsetArray[8];
  var discipline = skillsetArray[9];
  var speed = skillsetArray[10];
  var stability = skillsetArray[11];
  var stamina = skillsetArray[12];
  var strength = skillsetArray[13];
  var toning = skillsetArray[14];
  
  document.getElementById("agility{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = agility;
  document.getElementById("clarity{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = clarity;
  document.getElementById("coordination{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = coordination;
  document.getElementById("endurance{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = endurance;
  document.getElementById("flexibility{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = flexibility;
  document.getElementById("patience{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = patience;
  document.getElementById("power{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = power;
  document.getElementById("quickness{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = quickness;
  document.getElementById("discipline{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = discipline;
  document.getElementById("speed{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = speed;
  document.getElementById("stability{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = stability;
  document.getElementById("stamina{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = stamina;
  document.getElementById("strength{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = strength;
  document.getElementById("toning{{wf {&quot;path&quot;:&quot;member-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}").innerHTML = toning;
  </script>

Any help is appreciated!

---

Here is my site Read-Only:(Webflow - YFN Academy)**

[mickael_bsd (Mickaël Boussard)]

You can use ‘‘querySelectorAll’’ for trigger all of these éléments.

Put the same class on fields and the query selector return an array.

You can manipulate this easily.

[YFNAcademy (Ivan Koretskyy)]

I’m now learning more about the query selector, but I still don’t understand how I’ll get different outputs for every CMS item. I might need a code example that’ll help my situation if possible.

[YFNAcademy (Ivan Koretskyy)]

I’m not trying to return an array. I’m trying to use the array that I have and put it on each text for every CMS item. Which fails because it will only put it on the first CMS item

[memetican (Michael Wells)]

Hi Ivan, here’s where to start-

Sygnal | Video Message for Ivan

[YFNAcademy (Ivan Koretskyy)]

Thanks signal for an in-depth response! You started reviewing it while I was working on a solution so the code looked a little off for sure. I’ve updated the code to use only JS instead of jQueary. I used setAttribute instead of append and when I use the chrome tool, it doesn’t show that the ID changed in the HTML. So all of the ID’s for each CMS are still the same. The arrays work even though chrome shows errors (I fixed all of the arrays as well). The only problem seems like the setAttribute is not working, same as doing element.id. Any alternatives?

Also if the embed CMS thing is not a suitable option, I’d be happy to be in a call to figure out this situation. Send me a message for contacts.

[YFNAcademy (Ivan Koretskyy)]

I DID IT!!! I used CMS fields in the code to get each unique ID. Woohoo! Still message @memetican cause I might have another question for another problem. Thank you

Here’s the new code: