Jquery Ui sortable items option select just first item

Question

In my below code just the first #sort-item is sortable, others not. How can I solve it?

$('#sortable').sortable({
   items:"#sort-item"
});

Html;

<ul id="sortable">
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
</ul>

Edit: I try;

$('#sortable').sortable({
   items:"> #sort-item"
});

But steal not working

jsFiddle; https://jsfiddle.net/seamqykd/1/

Answer 1

You cannot assign multiple items the same ID (https://www.w3schools.com/html/html_id.asp)

Use a class to select the items:

<ul id="sortable">
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
</ul>

$('#sortable').sortable({
  items:".sort-item"
});

or even better, use the element

$('#sortable').sortable({
  items:"li"
});