Cost of storing live htmlCollection vs iterating array of item IDs (and tree traversal)

Question

The selection area contains items that are dynamically loaded (up to 100). Clicking an item, adds a copy of it to the storage box. Clicking the "x" button on an item in the storage box, removes the item and deselects it from the selection area.

Which is better practise/more efficient?

Option 1:
When the items are loaded into the selection area, store the items in as a live HTMLCollection in a variable. When the X is clicked, iterate this live collection and deselect it when found.
Question 1: Is it costly storing a live collection as a variable?
Question 2: When iterating over this live collection, does it actually iterate over the DOM or just the stored collection?

Option 2:
When the items are loaded into the selection area, store the item IDs only in an array. When the X is clicked, iterate this array, when the ID is found, perform a 'getElementById' which would traverse the DOM and then deselect it.

Answer 1

Neither would be a an issue as iterating over 100 nodes is not a lot.

But there is a 3rd option, storing a reference to the original directly on the clone. This way you can later on find the original by just looking at the clone's relevant property.

So after you clone, add a property to it with the original

const copyNode = originalNode.cloneNode(true);
copyNode.referenceToOriginal = originalNode; // make sure the property name is something that will not clash with built-in properties

then when you wan to deselect the original (after clicking on the X of the clone)

const clone = clickedNode;// somehow get the copied node you clicked the X of
deselect( clone.referenceToOriginal );
clone.remove(); // remove the clone from the DOM