Javascript puts the same value to all the elements

<td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped active"
                                    role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100" style="width:0%">
                                    <span id="current-progress"></span>
                                </div>
                            </div>
                        </td>
                        <td><a class="btn btn-danger"
                            th:href="@{/borrar_planificacion/{id}(id=${planificacion.id})}">
                                <i class="fas fa-trash-alt"></i>
                        </a></td>

                        <input class="progreso" type="hidden"
                            th:value="${planificacion.porcentaje}">

    <script>
    $(function() {
        var progreso = document.getElementsByClassName('progreso');
            for (i = 0; i < progreso.length; i++) {
            $(".progress-bar.active").css("width", progreso[i].value + "%").attr(
                    "aria-valuenow", progreso[i].value).text(
                            progreso[i].value + "%");
            }


    });
</script>