Javascript only runs in the first element of the table

I'm new to JavaScript and I have the following problem:

<tr th:each="planificacion : ${planificaciones}"
        th:onclick="'window.location.href = \'' + @{/planificacion/{idp}(idp=${planificacion.id})}+ '\''">

    <td th:text="${planificacion.nombre}"></td>
    <td>
        <div th:if="${planificacion.completado}">
            <span class="badge badge-pill badge-success"
                    style="font-size: 80%; padding: 6px 18px;">Completo</span>
        </div>
        <div th:if="${not planificacion.completado}">
            <span class="badge badge-pill badge-danger"
                    style="font-size: 80%; padding: 6px 18px;">Incompleto</span>
        </div>
    </td>
    <td>
        <div class="progress">
            <div id="dynamic"
                    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>

And the following script:

<script>
    $(function() {
        var current_progress = document.getElementById("progreso").value;
        var interval = setInterval(function() {

            $("#dynamic").css("width", current_progress + "%").attr(
                    "aria-valuenow", current_progress).text(
                    current_progress + "%");

        }, 1000);
    });
</script>

By doing what Paul told me, I have done this:

<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 + "%");
        }


});

Now I get the same value in all the progress bars, and I want each bar to have the value of {planificacion.porcentaje}