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/
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"
});
First using id in multiple element is an html Sementic Error, Id's are used to be in one and only one html element ,
And here that's what causes the issue, just replace in the html your id by a class name and in your js code replace #sort-item by .sort-item see below working snippet :
$('#sortable').sortable({
items:".sort-item"
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
<li class="sort-item">aaa</li>
<li class="sort-item">bbb</li>
<li class="sort-item">ccc</li>
<li class="sort-item">ddd</li>
<li class="sort-item">eee</li>
</ul>