javascript - Multiple draggable elements

Question

I'm making Task Manager with Spring and i have CRUD implementation of task creation:

    <form action="#" th:action="@{/task-create}"
      th:object="${task}" method="post">
    <input type="text" th:field="*{title}" placeholder=" title" > <br>
    <input type="text" th:field="*{text}" placeholder=" text" > <br>

 
    <input type="submit" id="submit" value="create task" >

</form>

Here is a code of my task box:

<div th:each="task:${task}" class="task " id="draggable">
        <div class="top-text-div">
            <p th:text="${task.title}" class="top-text title"></p>
            <button class="button-edit"><a th:href="@{task-update/{id}(id=${task.id})}">Edit</a></button>
            <button class="button-delete"><a th:href="@{task-delete/{id}(id=${task.id})}">Delete</a></button>
        <p th:text="${task.date}" class="top-text date "></p>
            <p th:text="${task.status}" class="status"></p>
            <p th:text="${task.expired}" class="expired"></p>
        </div>
        <p th:text="${task.text}" class="text"></p><br>

    </div>

I'm looking for a way to make ALL my new tasks draggable. I found solution with jquery

<script>
     $(function () {
            $("#draggable").draggable();
        });
    </script>

but it only works with one element. How can i do multiple elements draggable? Not exactly jquery, it can be any language or framework.

Answer 1

You create multiple task elements with the same id of "draggable". Thus jquery selecting first one (see this answer for details https://stackoverflow.com/a/8498617/12378936 ).

I would recommend to remove id attribute and replace element selector in js part with task class:

$(function () { $(".task").draggable(); });