It is super-fast, simple in settings, 100% safe and styles and HTML/CSS/Datasets combinations are unlimited.

Feel free to check and explore examples from above.

Elements in lists can be div, a, li, even p or tr/td (following the HTML Standard), and they can differ from one list to another on the same web page.
List unique element class is a main selector. That is: for all selectable elements in one list, it has to be the same class name.

Number of lists (sets of elements determined by the same class name) is not limited per one document.
One can even split one list to as many lists as needed with same class selector and only one instance of this function.

The class is easily initialized via main selector and only a handful of optional settings:

var leftItemsClass, rightItemsClass;

// One can set-up unlimited number of lists, in this example we used only two.
window.addEventListener("load", function () {

	// LEFT SELECTION
	leftItemsClass = new CSMOUSE("sels",
		{
			first:  "first_sels",		// First clicked index storage.
			last:   "last_sels",		// Last clicked index storage.
			values: "sels_values",		// List of all selected values storage (DOM indexes).
			items:  "sels_items",		// Initialization list setting storage (usually returned by server).
										// (Or any unique server parsable attribute set), for example:
										// elem_1,elem_2,elem_3,...
										// It is element id attribute list delimited with comma on DOM load.
										// If not set, CSMOUSE will create items with your HTML list(s).
										// First three are dynamically created and maintained.
			color:  "sels-blue",		// Selected indicating class; There are two coloring classes. 
										// One is :hover and the other is this (color). 
										// Both must be defined in proper cascading order, like:
										// .selector:hover and .selector.color, for example: 
										// .sels:hover {background-color: #fedcba;} and 
										// .sels.sels-blue {background-color: #abcdef;}; 
										// This way, a :hover style will be overlapped with .selector.color, 
										// when element is selected;
										// Defining them without cascading order will not work, so no good: 
										// .sels:hover{}, .sels-blue{}
			all:    "sel_all",			// Select all elements button/link.
			none:   "unsel_all",		// Un-select all elements button/link.
			togg:	"toggle",			// Toggle selected elements button/link.
										// All, None and Toggle buttons are optional for use.
										// All three functions can be reached on global document scope, and
										// with no arguments.
			cnt:    "display_counter",	// Selected elements counter (recalculated on each click).
			elems:	"total_elems",		// Total elements counter (initialized on function init).
										// cnt and elems HTML elements are optional for use.
										// Both of functions can be reached on global document scope, and
										// with no arguments.
			json:   "json",				// JSON output formatter button/link. Global scope too.
			serial: "serial",			// Serialize output formatter button/link. Global scope too.
			output:	"id",				// Output attribute (can be any, should be unique id attribute).
			debug:  true				// Debug mode, should be set to false in production mode.
		}
	);

	// RIGHT SELECTION
	rightItemsClass = new CSMOUSE("sels2",
		{
			first:  "first_sels2",
			last:   "last_sels2",
			values: "sels_values2",
			items:  "sels_items2",
			color:  "sels-red",
			all:    "sel_all2",
			none:   "unsel_all2",
			togg:	"toggle2",
			cnt:    "display_counter2",
			elems:	"total_elems2",
			json:   "json2",
			serial: "serial2",
			output:	"data-value",
			debug:  true
		}
	);

});
			

Element ID (or any data- like argument, or any) can be set as an output. It exports selected items via JSON or form serialization formats.

The most interesting functions to use outside CSMOUSE are output functions - selected elements to be passed to server (or whatever) and counters. Here are examples of code on above buttons:

// Following functions shows external usage of some CSMOUSE functions (can be applied to all, 
// for example if you use single submit button for all lists, play with combos here)
function getJSONLeft(){

	var a = leftItemsClass.getSelectedJSON();
	alert(a);

}
function getSerializedLeft(){

	var b = leftItemsClass.getSelectedSerialize();
	alert(b);

}
function getJSONRight(){

	var a = rightItemsClass.getSelectedJSON();
	alert(a);

}
function getSerializedRight(){

	var b = rightItemsClass.getSelectedSerialize();
	alert(b);

}
function numberSelectedLeft(){

	var c = leftItemsClass.getSelected();
	alert(c);

}
function numberSelectedRight(){

	var d = rightItemsClass.getSelected();
	alert(d);

}
			

Functions can be called anywhere from your web application (anchor, button, whatever with onClick event (or any event)):

...onclick="javascript: getJSONLeft();">OUTPUT LEFT JSON<...
...onclick="javascript: getSerializedLeft();">OUTPUT LEFT SERIALIZED<...
...onclick="javascript: numberSelectedLeft();">COUNT<...
...onclick="javascript: numberSelectedRight();">COUNT<...
...onclick="javascript: getSerializedRight();">OUTPUT RIGHT SERIALIZED<...
...onclick="javascript: getJSONRight();">OUTPUT RIGHT JSON<...
			

Of course, one can completely use it's own logics as needed. These are just examples.
Maybe combinations of selections from multiple lists, maybe anything.
This functionality is pure base for your imagination, creativity, engineering or developer demand tasks. Voilà.

This version relies purely on JavaScript (JS ES5+, on any platform). There is, of course, our fruity jQuery plugin implementation here.