Data being duplicated in date attributes within a foreach

I'm creating a star rating system where I pop the posts and show sorting. The problem is in the posts that receive the same note. You are not picking up the note of each post , but of a single post and showing the same note in the others.

In the database, I have the post table and it has the fields pontos and votos where in foreach using php I divide the points by votes and round the value and send for the data-average field that is in span and in * javascript I get this value and manipulate span increasing width that has a yellow background and has a span with a star background.

This is my code php :

<?php
 $consulta = $pdo->query("SELECT id_post , pontos , votos  FROM posts LIMIT 3 ");

$return = $consulta->fetchAll(PDO::FETCH_OBJ);

 foreach ($return as $dados) {

$calculo = ($dados->pontos == 0) ? 0 : round(($dados->pontos / $dados->votos), 1); ?>

 <span class="ratingAverage" data-average="<?=$calculo ;?>"></span>

 <span  data-id="<?= $dados->id_post; ?>"></span><div class="barra"><span class="bg"></span><span class="stars">

 <?php for ($i = 1; $i <= 5; $i++): ?><span class="star" data-vote="<?php echo $i; ?>"><span class="starAbsolute"></span></span>

 <?php endfor; echo '</span></div><p class="votos vt"><span>' . $dados->votos . '</span> votos</p>';

  ?><?php }  ?>

My css :

.barra{width:150px; height:30px; background:#ebebeb; position:relative;}
.stars{position:absolute; left:0; top:0; width:100%;}
.star{float:left;width:30px;height:30px; text-align:center; position:relative;cursor:pointer;}
.star.full{background:linear-gradient(to bottom, #fee24f, #f4bb2f)}
.bg{float:left;height:30px; width:30%; background:linear-gradient(to bottom, #fee24f, #f4bb2f);}
.starAbsolute{position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/img/config/v12/starpng.png) top left no-repeat;  background-size:cover;}

My javascript :

$(function() {
    var average = $('.ratingAverage').attr('data-average');
    function avaliacao(average) {
        average = (Number(average) * 20);

        $('.bg-').css('width', 0);
        $('.barra- .bg-').animate({width: average + '%'}, 500);
    }
    avaliacao(average);
});

This is the HTML code when executed:

<span class="ratingAverage" data-average="4"></span>
<span  data-id="1"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>1</span> votos</p>  

<span class="ratingAverage" data-average="4"></span>
 <span  data-id="2"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>2</span> votos</p>  

<span class="ratingAverage" data-average="4"></span>
<span  data-id="3"></span><div class="barra-"><span class="bg-"></span><span class="stars-">
<span class="star-" data-vote="1"><span class="starAbsolute-"></span></span><span class="star-" data-vote="2"><span class="starAbsolute-"></span></span><span class="star-" data-vote="3"><span class="starAbsolute-"></span></span><span class="star-" data-vote="4"><span class="starAbsolute-"></span></span><span class="star-" data-vote="5"><span class="starAbsolute-"></span></span></span></div><p class="votos vt"><span>3</span> votos</p>

If you look at the span where it has the attribute date-avarege you should get the votes of each id and that's not what happens. He takes the value of the first one and plays for the remainder, with the remainder with vote 4 of the first id