A function to sort a div element by its data attribute while moving html nodes without any performance hits of cloning or removing and reattaching a node.

sortHtml.js

function sortTableByColorSets() {

	// store an empty object to contain all colors
	var holdingCell = {};

	// loop over the colors in the predfined colors array.
	for (var color in colors) {

		// get the color value and create a stub for it in the object. e.g object.colorname
		colorValue = colors[color];
		holdingCell[color] = [];

		// loop over all items which have the data attribute color and has the value of the same value
		var items = $('.coordinate-plane-table-pair[data-color="' + color + '"]');

		// loop over the results and push into the new array stub.
		for (var i = 0, limit = items.length; i < limit; i++) {
			holdingCell[color].push(items[i]);
		}
	}

	// by the order of the color array sort the table
	for (var colorSet in holdingCell) {
		colorSet = holdingCell[colorSet];

		// append detaches the html node from its parent and reattaches it again, in the order we have chosen.
		$(colorSet).appendTo('.coordinate-plane-table-set');
	}

}