Uncaught rangeerror: maximum call stack size exceeded

See more:

Javascript

jQuery

I have an e-commerce site and want clicking of an item to reflect on both the item and a cart pegged at the top of the page. This works fine. I also want to maintain state across pages, such that if the server returns an already loaded cart, all corresponding items from that cart on the current page get selected. Attempts to ‘re-select’ these items throws the error Uncaught RangeError : Maximum call stack size exceeded.

What I have tried:

I understand the interpreter is complaining about the recursive process of trying to unselect cart items, reselect them in the items list ad infinitum. I’m trying to work around this by first removing all the cart items like so:

selectClones = function () {

		var retain = [];
	 	
	 	if (location.search.match(/cid=(\d+)/)) $('aside li').each((i,e) => {

	 		var e = $(e), team = e.find('span:first').text(), sel = e.find('span:last').text(),

	 		selInd = $(`th:contains(${sel})`).index();

	 		retain.push({t: team, s: selInd});
	 	}).remove();

	 	for (var i = retain.length - 1; i >= 0; i--) {
	 		
	 		$(`td:contains(${retain[i].t})`).parent().children().eq(retain[i].s).trigger('click');
	 	}
	}

Surprisingly, it doesn’t work unless I run this same snippet in the developer console. What else can I try?

The click listener

$('main').on('click', 'td.pointer, aside li.pointer', function(e) {

		if ($(e.target).is('td') && !$(e.target).hasClass('selected')) addSelection().call(this, null);

		else removeSelection().call(this, null);
	});

addSelection is a huge function that basically checks if a row of this item is preselected and tries to deselect it (this condition is what throws the error), then logs a custom object with details pertaining to this selected item for synchronization between the table list and the aside cart. I think this is more straightforward than posting the actual code but if that’ll make things clearer, let me know so I can post it too. Many thanks.