ID attribute does not work but CLASS does?
<p>I ran into this issue while practicing JQuery. </p>

<p>In the code below, I am trying to display an INPUT box when "Yes" is clicked, and hide it when "No" is clicked.</p>

<p>The ELSE IF statement within my JQuery syntax works perfectly when my INPUT tag has CLASS attributes.</p>

<p>But if I replace the CLASS attributes with ID attributes(ID="box1", ID="box2"), only the IF statement works but not the ELSE IF.(Please note that, I used appropriate Jquery selectors for ID and CLASS, so that may not be the issue).</p>

<p>Can someone please help me with this? The answer may be simple and obvious, but I am a beginner to JQuery, and this issue leaves me wondering. 
Thanks in advance!</p>

<p>Edited: Here's the problem code:</p>

<p>PS: I had been having issues posting this code on the comments, so I thought I would edit the original code snippet. Hope this helps!!!</p>

<pre><code>&lt;style type="text/css"&gt;
    #box2{
        display: none;
    }
&lt;/style&gt;

&lt;script&gt;
    $(function(){           
        $("#box1").click(function(){
            var x = $(this).val();

            if (x == "Yes")
            {
                $("#box2").css("display", "inline");
            }
            else if (x == "No")
            {
                $("#box2").css("display", "none");
            }               
        }); 
    });
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;  
&lt;input type="radio" name="color" Id="box1" value="Yes"&gt; Yes
&lt;input type="radio" name="color" Id="box1" value="No"&gt; No

&lt;input type="text" size="10" name="exp" Id="box2"&gt;
</code></pre>
