jquery storing properties in elements?

Question

I have a select element.

This element is looped over using jquery,

any options that are :selected are added to one list(lista)

any options that are :not(':selected') are added to another (listb)

these lists follow the structure of

<div id="lista">
  <div>1st selected option text <div class="button"></div></div>
  <div>2nd selected option text <div class="button"></div></div>
</div>

<div id="listb">
  <div>1st non selected option text <div class="button"></div></div>
  <div>2nd non selected option text <div class="button"></div></div>
</div>

Now my question is:
I would like to upon clicking the div with class button change it to either selected or not selected in the original select.

But I am not sure of the best place to store the value of the original option.

Answer 1

Take a look at jQuery.data(). It is a mechanism for storing arbitrary data associated with a DOM element.

jQuery.data( element, key, value )

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks

you can use the element shortcut:

$("#listb").data("key", "value");