Demo of cancel option by user selection of second list using JQuery

id="my_selectable1"

Item 1
Item 2
Item 3
Item 4
Item 5

id="my_selectable2"

Item 1
Item 2
Item 3
Item 4
Item 5

Cancel elements

Items from List with id=my_selectable1 can only be selected if they are not selected in the list with id=my_selectable2.

OR ( in another way saying something )

You can cancel selection of any item from the first list with id=my_selectable1 by selecting the same item from second list with id=my_selectable2. Tutorial Selectable JQuery

$(document).ready(function() {
//////////////////////////
    $( '#my_selectable1' ).selectable();
	$( '#my_selectable2' ).selectable({
  stop: function() {
	
	var selected=[]
		$( "li.ui-selected", this ).each(function() {
	
			selected.push( '#'+$(this).data('group'));
		});
		$( "#d2" ).html(selected.join(','))
		$( "#my_selectable1" ).selectable( "option", "cancel", '' ); // reset all
		$( "#my_selectable1" ).selectable( "option", "cancel", selected.join(',') );
	}
});
////////////////
})

HTML

id="my_selectable1"
<ul id="my_selectable1" class=sel>
  <li id=i1>Item 1</li>
  <li id=i2>Item 2</li>
  <li id=i3>Item 3</li>
  <li id=i4>Item 4</li></a>
  <li id=i5>Item 5</li>
</ul>
id="my_selectable2"

<ul id="my_selectable2" class=sel>
  <li data-group=i1>Item 1</li>
  <li data-group=i2>Item 2</li>
  <li data-group=i3>Item 3</li>
  <li data-group=i4>Item 4</li></a>
  <li data-group=i5>Item 5</li>
</ul>