Django and Sortable.js only one for iteration can drag objects

[nuevakenia]

i got a for iteration that iterate 3 columns with sorteable.js objects. The first iteration works well, i can drag objects perfectly, the problem is in the other 2 iterations were i cant drag any object, they have basically the same objects so i dont know what its the problem.

board.html

  <div class="container">
  
<div class="row">
       
        {% for co in columnas %}
        <div class="col-4" id="columnas">
            <div class="row align-items-start">
            <p><strong>COLUMN Name: </strong>{{ co.nombre }}</p>
            <div class="list-group" id="tareas">
                <div class="list-group-item">
                    <h5>Task 1</h5>
                </div>
                <div class="list-group-item">
                    <h5>Tarea task2</h5>
                </div>
                <div class="list-group" id="tareas">
                    <div class="list-group-item">
                        <h5>Tarea task3</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
        {% endfor %}  
</div>

Option.JS

const tareas = document.getElementById('tareas');
const columnas = document.getElementById('columnas');

new Sortable(tareas, {
    group: 'shared', 
    animation: 150,
    ghostClass: 'blue-background-class'
});

new Sortable(columnas, {
    group: 'shared', 
    animation: 150,
    ghostClass: 'blue-background-class'
});

[trasherdk]

So you end up with 3 elements with id="columnas" and 6 elements with id="tareas". That's not going to work.

[nuevakenia]

why not? its because in this line const tareas = document.getElementById('tareas');
only can get 1 element by id? is there a way to get many elements with the same id?

i need to iterate a lot of colums and task, how i could do that?

[trasherdk]

The document.getElementById('tareas') will only return a single node, so in your case, it's probably the first encountered.

You could try document.querySelectorAll('#tareas') but having duplicate id's is a bad idea.

Or you could try document.getElementsByClassName('list-group')

[nuevakenia]

i tried both methods but no ones work.
is another way to generate different id's, or use another identifier that could work?

[trasherdk]

That was kinda expected. You need unique id's.

Nesting <div> with the same id makes no sense.

<div class="list-group" id="tareas">
    <div class="list-group-item">
        <h5>Task 1</h5>
    </div>
    <div class="list-group-item">
        <h5>Tarea task2</h5>
    </div>
    <div class="list-group" id="tareas">
        <div class="list-group-item">
            <h5>Tarea task3</h5>
        </div>
    </div>
</div>

[owen-m1]

@trasherdk Is right, you should have tareas as a class instead of an id, and you will need to loop through all of those elements with that class and add Sortable to each individual one