jQuery update element id
<p>I am new to jQuery and would like to update an element's id. My approach is:</p>

<ol>
<li><p>select this element by its id</p></li>
<li><p>overwrite this id with a new value.</p></li>
</ol>

<p>would you mind telling me where my mistake is?</p>

<p>Thanks!</p>

<p>Below is the HTML code:</p>

<pre><code>&lt;tr&gt;&lt;th&gt;&lt;label for="id_aerial_size_dist"&gt;Aerial size dist:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;select name="aerial_size_dist" id="id_aerial_size_dist"&gt;
&lt;option value="a"&gt;Very Fine to Fine&lt;/option&gt;
&lt;option value="b"&gt;Fine to Medium (EFED Default)&lt;/option&gt;
&lt;option value="c"&gt;Medium to Coarse&lt;/option&gt;
&lt;option value="d"&gt;Coarse to Very Coarse&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>jquery</p>

<pre><code>&lt;script type="text/javascript" src=" ../stylesheets/jQuery-1.7.2.js"&gt;&lt;/script&gt; 

&lt;script&gt;
$(document).ready(function() {

    $('#id_aerial_size_dist').attr('id', 'id_a');

    });
&lt;/script&gt;
</code></pre>
