jQuery UI - Multiple serialized .selectable lists - css

Question

I'm making a error report handling system, and I'm trying to use jQuery UI .selectable to get all the reports a user has clicked, but the reports are grouped in lists based on the system they come from. Multiple lists can be selected from at the same time.
As in the linked demo, I'm currently just printing out IDs, which works fine for a single list. However, when I'm selecting items from two or more different lists, the IDs that are already listed disappear. They seem to still be selected in .selectable's eyes, but they don't get printed anymore.
Every time I click on a different list, the previous IDs disappear and the new ones appear.
Does anyone have any idea what I can do to get everything printed?
Also, is there any way to apply the .ui-selected class to elements, given a string/array of values that are supposed to be selected? Basically, the opposite of this script's functionality. (If that made any sense..?)
JSFiddle here: http://jsfiddle.net/Kantana/Z3SBU/1/
Javascript
$(function() {
$(".selectable").bind("mousedown", function(event) {
event.metaKey = true;
}).selectable({
stop: function() {
var result = $("#selectedItems").empty();
$(".ui-selected", this).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
});
})
CSS
This example mainly uses the Twitter Bootstrap CSS.
HTML
<span id="selectedItems">None selected</span>
<div class="accordion" id="accordion2">
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>System 1 - All responding</a>
</div>
<div id='1' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_60'>
Error #60 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>System 2 - All responding</a>
</div>
<div id='2' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_62'>
Error #62 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>System 3 - All responding</a>
</div>
<div id='3' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_56'>
Error #56 - Responding
<p class='tinytext'>Check type: Free Memory</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_57'>
Error #57 - Responding
<p class='tinytext'>Check type: SSH</p>
<p class='tinytext'>Error message: CRITICAL - Socket timeout after 10 seconds</p>
<li class='report file ui-widget-content' id='report_55'>
Error #55 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: PING CRITICAL - Packet loss = 100%</p>
<li class='report file ui-widget-content' id='report_54'>
Error #54 - Responding
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_58'>
Error #58 - Responding
<p class='tinytext'>Check type: Load Average</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>System 4 - 1 error</a>
</div>
<div id='4' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_59'>
Error #59 - Warning
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unknown</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>System 5 - 1 error</a>
</div>
<div id='5' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_61'>
Error #61 - Warning
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: DISK WARNING - free space: / 11230 MB (15% inode=78%): /dev 989 MB (99% inode=99%): /run 398 MB (99% inode=99%): /run/lock 5 MB (100% inode=99%): /run/shm 997 MB (100% inode=99%):</p>
</li>
</ol>
</div>
</div>
</div>
</div>

Answer 1

Change the scope of the stop function select the ui-selected elements within the entire accordion. Specifying $(".ui-selected", this) only looks at the single item that was selected since this contains a reference to the selectable.
stop: function() {
var result = $("#selectedItems").empty();
//changed from this to #accordion
$(".ui-selected", $("#accordion2")).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
Working Example http://jsfiddle.net/Z3SBU/2/