Make element own its own variable?
<p>I made a function that lists out the months.    </p>

<pre><code>function genDate() {
        var d = new Date();

        var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN",
        "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];

        var day = d.getUTCDate().toString();
        var mon = d.getUTCMonth();
        var year = d.getUTCFullYear();

        $("#day").prepend('&lt;span id="day_num"&gt;' + day + '&lt;/span&gt;');

        var cc = mon;
        for (var i = 0; i &lt; 12; i++) {
            $("#date_cont").append('&lt;div class="month"&gt;&lt;a href="" 
                  onclick="return false;" &gt;' + monthNames[cc] + '&lt;/a&gt;&lt;/div&gt;');

            cc++;

            if ( cc &gt; 11 ) {
                cc = 0;
            }
        }
    }
</code></pre>

<p>What I want to do is have the generated .months elements hold different variables like its month index (0-11) that can be used by other functions. I guess the elements would act as objects (each element of .month class holds its own unique values). I'm new to javascript so I don't know how to implement this. </p>
