I'm sure we've all done this before:

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable">
USER #232
</a>

But then we say, oh my, I need more ways to store tracking info about this div!

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable">
User: John Doe
</a>

And the sickness keeps growing. We just keep on packing it inside that poor little element and it's attributes. All so we can keep track of who it is.

So with my limited knowledge of JS, someone please tell me how to do something like this:

<a id="33">USER #33</a>

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

So here we just added what I would call invisible attributes, because we just played God and made those attributes up on the fly like it was no problem. The cool part is that these would be kept in their own little object somewhere in variable land. NOT in the tag itself.

Then later on, in a code nested far far away, be able to say, oh, i wonder what group_color John is...

user_group_color = $(table).find(a['username':'john']).attr('group_color');

THEN BAM!!!! POW!!!!

alert(user_group_color + " is a bitchin color!");

You get to know his group color... all without adding a bunch of bloated element tracking nonsense into our tags.

So does this sort of thing exist? If not, how do I make it?