Problem when displaying content and changing the view

Question

I was with a problem regarding how to pass the data to the front and change the visualization of such information, after giving a search, I gathered some things I was researching, it was very simple, but it worked at first (I was wrong in this part, I did not test with more content).

The code, takes back values and only displays true or null (displays nothing rs):

{{#each qrs}}
<h2 class="d-inline" id="horarioDaAula1">{{horario1}}</h2>
    <h2 class="d-inline" id="horarioDaAula2">{{horario2}}</h2>
    <h2 class="d-inline" id="horarioDaAula3">{{horario3}}</h2>
    <h2 class="d-inline" id="horarioDaAula4">{{horario4}}</h2>
    <h2 class="d-inline" id="horarioDaAula5">{{horario5}}</h2>
    <br>
{{/each}}

The script I used to change the view, to look more beautiful in a certain way.

<script>
      // Pegar o valor e exibir ícones. Para colocar na visualização da presença do aluno
    for(i = 1; i<=5; i++){

      var n = "#horarioDaAula";
      var horario = n + i;

      var myElement = $(horario);
      var myText = myElement.text();  
      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }

  </script>

Until then everything was quiet, but when {{#each qrs}} was implemented, more values appear according to each Collection. With that it was like the following image:

I’m not very knowledgeable, I’m new, so I figured (I think) jquery only takes one ID and not all H2 that have the same ID.

How could I be settling this question, or doing otherwise?

EDIT 1: How it appears on the front with the use of {{#each qrs}}

    <h2 class="aa d-inline" id="horarioDaAula1">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula2">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula3">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula4">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula5">true</h2>
<br>
    <h2 class="aa d-inline" id="horarioDaAula1">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula2">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula3">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula4">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula5">true</h2>
<br>

That is, the more documents (mongodb) I have, the more H2 appears.

I tried to take the values of H2 by class (aa) but could not get these values

The way I tried to take the class:

for(i = 1; i<=5; i++){

      var n = ".aa";
      var myElement = $(n);
      var myText = myElement.text();  
      console.log(myText)

      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }

Answer 1

Incorrect solution:

If I understand, you’re making one "foreach" on "qrs" and for each qr you are using the code you have pasted into the script.

So try the following solution (I haven’t tested, I’m doing it in my head)
Loop qrs:

{{#each qrs}}
    <h2 class="aa d-inline" data-id="1">{{horario1}}</h2>
    <h2 class="aa d-inline" data-id="2">{{horario2}}</h2>
    <h2 class="aa d-inline" data-id="3">{{horario3}}</h2>
    <h2 class="aa d-inline" data-id="4">{{horario4}}</h2>
    <h2 class="aa d-inline" data-id="5">{{horario5}}</h2>
    <br>
{{/each}}

Script:

<script>
      // Pegar o valor e exibir ícones. Para colocar na visualização da presença do aluno
    for(i = 1; i<=5; i++){

      var myElement = $(`.aa[data-id="${i}"]`);
      var myText = myElement.text();  
      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }

  </script>

---

The problem:

Even with this solution, it happens that always the data-ids will be restarted in your application, IE, after the 5, always back to 1, 2, 3, 4, 5 and javascript will understand that it is to get all data-ids 1, 2... again.

Also, his bond is only encompassing the first 5 elements, if there are more, he will not make the exchange

---

Correct solution:

1. Put all the time elements into a variable:

var Horarios = $('.aa');

2. Make a repeat loop with all screen times

Horarios.each(function(index, item) {

});

3. Check that the contents of each repeat loop item (of each time) is true or false, if true, print the gift icon, if false, the missing icon.

  let myText = $(this).html();
    if(myText == "true"){
      $(this).html('ICONE PRESENTE');
    } else {
      $(this).html('ICONE FALTOU');
    }

4. Complete code:

<script>
    // Coloca todos os horarios em uma variavel
    var Horarios = $('.aa');

    // Percorre o array criado na varivel anterior
    Horarios.each(function(index, item) {
      // Verifica se o html dentro do horario tem true ou false
      let myText = $(this).html();
        if(myText == "true"){
          $(this).html('ICONE PRESENTE');
        } else {
          $(this).html('ICONE FALTOU');
        }
    });
</script>

Demonstration:

var Horarios = $('.aa');

Horarios.each(function(index, item) {
  let myText = $(this).html();
    if(myText == "true"){
      $(this).html('<span style="color: green">&#10004;</span>');
    } else {
      $(this).html('<span style="color: red">&times;</span>');
    }
});

/* deixa os h1 em uma unica linha */
h1 {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="aa">true</h1>
<h1 class="aa">false</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">false</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>