Adding elements with unique ids automatically generated

Adding elements with unique ids automatically generated

Im building a small feature where users can create a page. They select an element they would like to add from a select box. When they select it it is automatically appended into the preview div. The problem is that they can choose to add any number of divs, p,s etc to this preview div and i need a way of giving them all unique ids so i can use them later.

  1. $j('#element_select').change(function(){
       
            if($j('#element_select option:selected').val() == 'header')
            {
                $j('#page_holder').append('<div class="element_bit page_header" id="header">   </div>').fadeIn(1000);
                $j('.page_header').append('<input type="text" class="text header_name" />');
                $j('.header_name').focus();
            }






  2. });
as you can see header is given the id "header" but if they all had this id then how would i differentiate between all of the headers?

Anyone have and ideas?