title: get a new copy of a global variable in a jQuery Call
body: <p>Trying to edit an ID with a variable, and it's calling the same value for the variable each time even though the variable is changing:</p>
  
  <p>Ok, I'm messing around with code to do a drag and drop from one section to another, where it will drop a cloned copy of the original in the drop section (clone/append). If you click on it, it will clone/append a div section containing a form. I want to change the form ID to be unique, by having it be changed to a static string + a variable. After it does the clone, it should increment the variable so that the next time a different copy is made it will get a new form ID.</p>
  
  <p>What SEEMS to be happening is that it works just fine the first time the code runs it gets the variable and appends it on to the static string, but when it is called a second time for a new clone, instead of getting the current value of the global variable, it uses the same value that it had last time. So first call would result in RSS0, and second call would ALSO result in RSS0 even though the formID variable is now at 1 - I expected it to be RSS1 and am VERY confused as to why it isn't.</p>
  
  <p>The variable IS updating properly, because I tracked that using chrome's inspect element (scripts tab, watch expressions) tool, and when I make a different call for a different object being cloned, it takes the current value of the global variable - for the first call, then it does the same thing and is 'stuck' on its initial value at the time of the first call.</p>
  
  <p>I tried going through javascript directly rather than using jQuery to change the ID, and the first time it works correctly, the second time the second clone has the same ID as the first clone, and it 'properly' changes the ORIGINAL - I'm doing a getElementById for this one, and pulling up the first match (the original is listed near the bottom of the page) to have the ID be changed.</p>
  
  <p>Ok, now that I've explained what I'm trying to do and what seems to be actually happening, let me put up my code and maybe someone can tell me how I can fix this so that each form has a unique id....</p>
  
  <pre><code>var formID = 0; //used to make each form have its own unique ID
  
  &lt;!-- code section removed - above = global variable,
  below is within some other stuff but working 'fine' --&gt;
  
  $(".draggable").click(function()
  {
  //first check if it doesn't already have #testContents, then check if it is in the copy area
  if(!$(this).is(':has(.dragContents)') &amp;&amp; $(this).parent().hasClass('copyArea'))
  {
      //if it doesn't already have this and is in the correct spot, append a new copy of the appropriate type
  
      switch( $(this).html() ) //use the html contents of the item to determine which one to add
      {
                          case "RSS":
                              $("#RSScontents").clone().appendTo(this);
                              //document.getElementById("RSS").id = "RSS"+formID;
                              $(this).find("#RSS").attr("id","RSS"+formID);
                              formID++;
                              break;
                          case "Advertisement":
                              $("#drag2contents").clone().appendTo(this);
                              $(this).find("#advert").attr("id","advert"+formID);
                              formID++;
                              break;
  </code></pre>
  
  <p>and the div tag that is being cloned then modified so that you can see the form that I'm working with:</p>
  
  <pre><code>&lt;div id="RSScontents" class="dragContents" style="width:380px; padding-left:2px; margin:5px;"&gt;
  This is the RSS information section
  &lt;form id="RSS" method="post"&gt;
      RSS Feed URL: &lt;input type="text" name="rssFeedURL" size=35 /&gt;&lt;br /&gt;
      RSS Feed Title: &lt;input type="text" name="rssFeedTitle" size=35 /&gt;&lt;br /&gt;
      &lt;input type=button name="rsssave" value="Save"&gt;&lt;input type=button name="rssdelete" class="delete" value="Delete"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>