Demo of Selectable stop event using JQuery

« Tutorial Selectable

<ul id="my_selectable">
  <li id=i1 data-group='group1'>Item 1</li>
  <li id=i2 data-group='group2'>Item 2</li>
  <li id=i3 data-group='group3'>Item 3</li>
  <li id=i4 data-group='group4'>Item 4</li>
  <li id=i5 data-group='group5'>Item 5</li>
</ul>
<span id=d1></span>
<span id=d2></span>

JQuery

<script>
$(document).ready(function() {
/////////////
$( "#my_selectable" ).selectable({
  stop: function() {
	var result1 = []
	var result2=[]
		$( "li.ui-selected", this ).each(function() {
			result1.push( this.id);
			result2.push( $(this).data('group'));
		});
		$( "#d1" ).html(result1.join(','))
		$( "#d2" ).html(result2.join(','))
	}
});
/////////
})
</script>