Increase element ID by one after every click?
<p>I am trying to clone multiple divs on my page by using the jQuery <code>.clone()</code> method. The problem is, as soon as a div is cloned, it needs to have a unique ID. The cloned ID has to be there too. I was thinking I could keep the old ID and then just add a number on, increasing as more div's are on the page. </p>

<p>Example: base ID = one, so div one would be <code>id</code>, then div two would be <code>id-2</code>, then div three would be <code>id-3</code>, etc.</p>

<p>Is this possible? My attempt at this is below:</p>

<pre><code>$("a").click(function(){
        var target = $(this).attr("href");
        var id = $(target).attr("id");
        $(target).clone().attr("id",id + $(id).size()).attr("class","drag").appendTo("body");
});
</code></pre>

<p>Each <code>a</code> tag looks like this:</p>

<pre><code>&lt;a href="#one"&gt;One&lt;/a&gt;
&lt;a href="#two"&gt;Two&lt;/a&gt;
</code></pre>

<p>Then the cloned element looks like this:</p>

<pre><code>&lt;div class="drag base" style="background-color:blue" id="one"&gt;&lt;/div&gt;
&lt;div class="drag base" style="background-color:green" id="two"&gt;&lt;/div&gt;
</code></pre>
