Create new unique ids for each element dynamically
<p>In the following code, I am doing various things but what I am now looking at is that fact that I am assigning to each menu item href the same name as per the id name of each element I am creating.</p>

<pre><code>$(".nav li a").on("click", function(e) {
$(this).attr("href",$(".span6").attr("id"));
$('#content').removeAttr('id');

var $row = $(".span9");
var $rowNew = $('.new');

if ($rowNew.children().length &gt; 1) {
        $(".span9 div").removeClass("new");
        $('&lt;div class="row-fluid new"&gt;&lt;/div&gt;').prependTo($row);
}

if ($(".new").length == 0) {
        $('&lt;div class="row-fluid new"&gt;&lt;/div&gt;').prependTo($row);
        $('&lt;div id="content" class="span6"&gt;&lt;/div&gt;').appendTo('.new');
} else {
    $('&lt;div id="content" class="span6"&gt;&lt;/div&gt;').appendTo('.new');
}

});
</code></pre>

<p>This is how I am assigning to each menu item href the same name as per the id name of each element I am creating:</p>

<pre><code>    $(this).attr("href",$(".span6").attr("id"));
</code></pre>

<p>I now need to create a new unique id name for each <code>&lt;div id="content" class="span6"&gt;&lt;/div&gt;</code></p>

<p>I know it has already an id called <code>#content</code> but I am removing that on a click using <code>$('#content').removeAttr('id');</code></p>

<p>How do I generate new unique ids each time?</p>

<p>In another template using php i do: <code>&lt;?php $a = 1; ?&gt;</code> then <code>&lt;div class="span6" id="&lt;?php echo "i".$a; ?&gt;"&gt;</code> in a loop then <code>&lt;?php $a++; ?&gt;</code> but about in my case with jquery? </p>

<p>Also I think I will need to do something in regards of the first and last <code>&lt;div id="content" class="span6"&gt;&lt;/div&gt;</code> as these will already have an id #content set, these ids are removed on the next click only at the moment so creating a new id will lead to have 2 ids for the first and last i guess.</p>
