Jquery ui sortable array returning empty strings

Question

For some reason the .sortable() function of the jQuery UI is returning empty strings and I cannot figure out why. Here's my code:

<ul id="sortable">
    @{int i = 0;}
    @foreach (var item in Model.Columns)
    {
        if (item.isrequired == true)
        {
            <li class="col-lg-12 col-md-12 col-sm-12 ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                <div class="col-lg-12 col-md-12 col-sm-12" style="position: relative;">
                    @Html.CheckBox("ColumnGroup", true, new { @value = item.column_name, @id = item.column_name, data_icon = "Foo_" + i, @name = "ColumnCheckbox", @disabled = "disabled", @class = "squaredThree" })&nbsp;
                    @Html.Label("", (string)item.column_name)&nbsp;&nbsp;
                    <span style="font-size: 0.9rem; color: red; vertical-align: text-top!important">*Required Column</span>
                </div>
            </li>
            i++;
        }
        else
        {
            <li class="col-lg-12 col-md-12 col-sm-12 ui-state-default">
                <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                <div class="col-lg-12 col-md-12 col-sm-12 checkAllBoxes" style="position: relative;">
                    @Html.CheckBox("ColumnGroup", true, new { @value = item.column_name, @id = item.column_name, data_icon = "Foo_" + i, @class = "squaredThree" })&nbsp;
                    @Html.Label("", (string)item.column_name)
                </div>
            </li>
            i++;
        }
    }
</ul>

and:

var sortedIDs = $( '#sortable' ).sortable( "toArray", { attribute: 'data-icon' } );

The draggability works just fine but I cannot get the array order of the li's

Answer 1

I had no ID's on the Li elements, only on the inputs. Once I added the id's to the lli's it works perfectly.