jquery show / hide of div on selection of related radio button
<p>This is my jquery code</p>

<pre><code>$(document).ready(function() {
$("div.imgDisp").hide();
$('[id="' + $(":radio:checked").val()+'"]').show();
    $('input[name="rdNumber"]:radio').click(function() {
     $("div.imgDisp").fadeOut('slow');
    $('[id="' + $(this).val()+'"]').fadeIn('slow');
});
});
</code></pre>

<p>this is html code</p>

<pre><code>&lt;div class="wrapper"&gt; &lt;strong&gt;&lt;span&gt;*&lt;/span&gt; Number&lt;/strong&gt;

&lt;div class="formText"&gt;
    &lt;input type="radio" name="rdNumber" value="100" /&gt;100
    &lt;input type="radio" name="rdNumber" value="200" checked="checked"/&gt;200
    &lt;input type="radio" name="rdNumber" value="300" /&gt;300&lt;/div&gt;
&lt;/div&gt;

&lt;input type="radio" name="rdImage" value="preExisting" /&gt;Choose from images below
&lt;div id="100" class="imgDisp"&gt;
&lt;div class="heading"&gt;10x10&lt;/div&gt;
&lt;input type="radio" name="preExistingImage" id="100" value="10x10-1"
/&gt;
&lt;img src="1-1.png"&gt;
&lt;input type="radio" name="preExistingImage" id="100" value="10x10-2" /&gt;
&lt;img src="1-2.png"&gt;
&lt;/div&gt;
&lt;div id="200" class="imgDisp"&gt;
&lt;div class="heading"&gt;10x20&lt;/div&gt;
&lt;input type="radio" name="preExistingImage" id="200" value="10x20-1"
/&gt;
&lt;img src="2-1.png"&gt;
&lt;input type="radio" name="preExistingImage" id="200" value="10x20-2" /&gt;
&lt;img src="2-2.png"&gt;
&lt;/div&gt;
&lt;div id="200" class="imgDisp"&gt;
&lt;div class="heading"&gt;20x10&lt;/div&gt;
&lt;input type="radio" name="preExistingImage" id="200" value="20x10-1"
/&gt;
&lt;img src="3-1.png"&gt;
&lt;input type="radio" name="preExistingImage" id="200" value="20x10-2" /&gt;
&lt;img src="3-2.png" width="20" height="10"&gt;
&lt;/div&gt;
</code></pre>

<p>The code is working fine
on choosing 100 radio button it is showing div with id = 100 and on selecting id = 200 it is showing two divs with id = 200. 
here check this fiddle <a href="http://jsfiddle.net/vDBDA/2/" rel="nofollow">http://jsfiddle.net/vDBDA/2/</a></p>

<p>now there are two queries
1. I use duplicate id to show similar type of divs on selection of radio button like this code</p>

<pre><code>&lt;div id="200" class="imgDisp"&gt;
</code></pre>

<p>though it is working fine but I know duplicate id's is a problem. how can I fix it?</p>

<ol>
<li>when the page loads number 200 is checked by default.. and here in this fiddle it is displaying the divs associated with radio button 200 but in actual programming and in localhost/browser it does not show.. What could be the reason?</li>
</ol>

<p>All your help will be golden. thanks guys in advance</p>
