JS does not read first ID only second

Question

Ok I have some JS that depending on the percentage the progress bar will load and display the % inside the bar.

see working code bellow

$("#next-button").click(function() {
        a.eventHub.publish("ui/nextclick")
      });

    UI.prototype.updatePercentile = function(a) {
        if (this.isStandalone || -1 == a.percentile) $("#results-percentages")
          .hide();
        else {
          $("#results-percentages")
            .show(), $("#results-percentile-1")
            .html(a.percentile), $("#results-suffix")
            .html(a.suffix), $("#results-suffix-2")
            .html(a.suffix), 1 === a.timesTaken ? ($("#results-timestaken")
              .html(a.timesTaken + " time"), $("#results-percentile-2")
              .html("100")) : ($("#results-timestaken")
              .html(a.timesTaken + " times"), $("#results-percentile-2")
              .html(a.percentile));
          var b = 0;
          $("#percentile-scale .scale-item")
            .each(function() {
              b += $(this)
                .outerWidth()
            }), $("#percentile-scale .scale-indicator").css("width", b * a.percentile / 100 + "%"),
            $(".scale-marker").css("left", b * a.percentile / 100 + "%")
        }
    }

        function move() {
          var elem = document.getElementById("myBar");
          var width = 0;
          var id = setInterval(frame, 50);

          function frame() {
            if (width >= document.getElementById("results-percentile-2").innerHTML) {
              clearInterval(id);
            } else {
              width++;
              elem.style.width = width + '%';
              document.getElementById("demo").innerHTML = width * 1 + '%';
            }
          }
        }

however now i want to pull in a ne ID to add along side the percentage do it will display like 10th or 3rd depending on the score, however when i alter my JS to include the other ID (See bellow) it just shows the th, rd or st no the number.

HTML

   <h3 style="text-align: left;"> You scored in the <em class="big-six"><span id="results-percentile-1"></span><span id="results-suffix-2"></span></em> percentile.
                        </h3>

    <div class="myProgress">
                            <div id="myBar" style="width:0">
                                <div id="demo"><span id="results-suffix"></span></div>
                                <!--<div id="demo"></div>-->
                            </div>

JS

(function() {
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame, 50);

        function frame() {
            if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
                document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML   ;
            }
        }
    }());

Answer 1

IDs MUST be unique. If you need multiple elements with the same identifier, use a class.

For example:

<div id="myBar" style="width:0">
    <div class="demo"><span class="results-suffix"></span></div>
    <div class="demo"></div>
</div>

And your javascript would change to:

function frame() {
    if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
        clearInterval(id);
    } else {
        width++;
        elem.style.width = width + '%';
        var demoElems = document.getElementsByClassName('demo');

        var i, innerHTML, resultsElems;
        // loop through the list of elements
        for(i = 0; i < demoElems.length; i++) {
            resultsElems = demoElems[i].getElementsByClassName('results-suffix')
            innerHTML = width * 1;
            // only append the results-suffix element if it exists
            if(resultsElems.length > 0) {
                innerHTML += resultsElems[0].innerHTML;
            }
            demoElems[i].innerHTML = innerHTML;
        }
    }
}