Change <select> id on click in jQuery
<p>There is a select option in search form and it has an id (e.g. <code>main_cat</code>).</p>

<p>Now I want that when I click on a link('a'), the id of <code>select</code> should be changed with <code>second_cat</code>.</p>

<blockquote>
  <p><strong>Note</strong> Give me solution with nesting div classes on jsFiddle, because <code>main_cat</code> id also used in another section on same page</p>
</blockquote>

<p>Here is my sample code:</p>

<pre><code>&lt;div class="widget widget_vehicle_search"&gt;
    &lt;div class="search-form-widget"&gt;

        &lt;form id="wp-advanced-search" name="wp-advanced-search" class="wp-advanced-search" method="" action=""&gt;
            &lt;div id="wpas-main_cat" class="wpas-main_cat wpas-generic-field  wpas-field"&gt;
                &lt;div class="label-container"&gt;
                    &lt;label for="main_cat"&gt;Select A Manufacturer:&lt;i class="icon-help-circled-1 tooltip"&gt;&lt;/i&gt;&lt;/label&gt;
                &lt;/div&gt;

                &lt;select id="main_cat" name="main_cat"&gt;
                    &lt;option value="any"&gt;Any Manufacturer&lt;/option&gt;
                &lt;/select&gt;

            &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<blockquote>
  <p>When Click on a link <code>main_cat</code> id changed with <code>second_cat</code></p>
</blockquote>

<p>Hope you understand my question</p>