How can I change the ID of an element and then refer to it by its new id?
<p>I am using jQuery 1.7.1</p>

<p>I am trying to make it so that when one element is keyed in, another element with a specific class will have its id and value changed.</p>

<p>Here is my HTML:</p>

<pre><code>&lt;html&gt;&lt;body&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;

&lt;input type='text' id="A"&gt;
&lt;input type='text' id="B" class='SponsorID'&gt;

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>Here is my jQuery:</p>

<pre><code>$("#A").keyup(function() {
   var ThisValue = $("#A").val();
   $(".SponsorID").val(ThisValue);
   $(".SponsorID").attr("id", ThisValue);
});
</code></pre>

<p>What works? The value of the element with the class of SponsorID changes.</p>

<p>What doesn't work? The id of the element with the class of SponsorID does NOT change.</p>

<p>I would expect that the id would change.  Why does the ID not change? </p>

<p>Here's my fiddle:</p>

<p><a href="http://jsfiddle.net/GWzpU/16/" rel="nofollow">http://jsfiddle.net/GWzpU/16/</a></p>
