HTML element related data storage

Hi Folks,

I'm working on a voting widget generator Drupal module. Arbitrary voting widgets can be defined through a hook, and my module renders them to the node page. At the final phase the forms are converted to an ajaxian style and this needs a lot of information related to elements. The good old (quick and dirty) way to do this is the custom attributes. For example:

<img src="http://www.blogger.com/..." class="..." weight="..." type="..." key="..." nid="..." />

As far as I know, it works in most browser, however, I bet it fails on any xhtml validation. (And so ugly.) My idea is a common data storage. You create a new element with a unique ID that can be a key as well in a javascript object, which would contain data. Let's see an example:

<script type="text/javascript>
var data = {};
$('div.class').append('<img id="i1" src="pic1.png" />');
// save data
data['i1'] = {weight:__, type:__, key:__, nid:__, names:[__, __, __]};
// retrieve data
var necessary_name = data['i1'].names[2];
</script>

That's all. This example is just a schema. It can help if you generate lots of elements or you want to attach data elements in runtime.

Cheers,
Peter