JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortlist">
        <li id="Vancouver">Vancouver</li>
        <li id="Toronto">Toronto</li>
        <li id="Montreal">Montreal</li>
        <li id="Ottawa">Ottawa</li>
        <li id="Calgary">Calgary</li>
        <li id="Edmonton">Edmonton</li>
        <li id="Winnipeg">Winnipeg</li>
     </ul>

CSS

#sortlist { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortlist li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortlist li span { position: absolute; margin-left: -1.3em; }

JavaScript

// also tried $('#sortlist').sortable('serialize);
$('#sortlist').sortable();
var result = $('#sortlist').sortable("serialize");

alert(result);