jQuery sortable not working

Question

I have a jquery accordion with selectable lists inside. When the user clicks an item, it appears in their selected items list, which is sortable. There are a number of columns that appear in their list as default columns, and each item selected shows up as green in the accordion. My issue is that line items with two words in the sortable list are not sortable, but items with one word are. I cannot figure out why. Any thoughts?

Here's my fiddle: http://jsfiddle.net/kmbonin82/NkgC2/9/

HTML:

<h3>List 1</h3>
<ul class="list">
     <li id="Country">Country</li>
    <li id="Region">Region</li>
  <li id="Location_Name">Location Name</li>
    <li id="Location_Start">Location Start</li>
</ul>
<h3>List 2</h3>
<ul class="list">
     <li id="Contract_Start">Contract Start</li>
    <li id="Contract_Status">Contract Status</li>
    <li id="Contract">Contract</li>
</ul>

<p id="feedback">
<span>You've selected items:</span>    
    <ul id="select-result">
        <li id="Region">Region</li>
        <li id="Location Name">Location Name</li>
        <li id="Country">Country</li>
        <li id="Contract Status">Contract Status</li>
    </ul>    
</p>

JS:

 $(function () {
       $(".list").selectable({
           stop: function () {
               var result = $("#select-result");

               $(".ui-selected", this).each(function () {
                   $(this).css('background-color', '#669966');
                   $(this).css('color', '#FFFFFF');
                   result.append('<li id="' + $(this).text()  + '">' + $(this).text() + '</li>');
                   sortColumns();
               });
           }
       });
       sortColumns();
   });


   $(function () {
       $("#accordion").accordion({
           collapsible: true,
           autoHeight: false
       });
   });

   $(function () {
       $("#select-result li").each(function (index) {
           var thisID = $(this).attr('id');
           thisID = thisID.replace(/ /g, '_');
           document.getElementById(thisID).style.background = '#669966';
           document.getElementById(thisID).style.color = '#FFFFFF';
           sortColumns();
       });
   });

   function sortColumns() {
       $(function () {
           $("#select-result")
            .sortable({
                handle: ".handle",
                over: function () {
                    removeIntent = false;
                },
                out: function () {
                    removeIntent = true;
                },

                beforeStop: function (event, ui) {
                    if (removeIntent == true) {
                        var thisID = ui.item.text();
                        thisID = thisID.replace(/ /g, '_');
                        ui.item.remove();
                        document.getElementById(thisID).style.background = '#FFFFFF';
                        document.getElementById(thisID).style.color = '#000000';
                    }
                }
            })
            .find("li")
            .addClass("ui-corner-all")
            .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>");
       });
   }

Answer 1

The 'Location Name' and the 'Contract Status' are not sortable because their id values are wrong. You have space between them.

        <li id="Location Name">Location Name</li>
        <li id="Contract Status">Contract Status</li>

Updated Demo: http://jsfiddle.net/NkgC2/10/

Bonus:

a) the way you are pre-pending the div is not a right way. If you see your html code, after each item you select it adds an extra div for each list item

b) Instead of calling sortable() function couple times (it get calls 3 times before even selecting any item. ) use jquery 'on' method to bind api to non-existing elements.