Submenu functionality under menus using addClass() and removeClass() doesn't fully work
<p>I'm creating multiple submenus under multiple menus using addClass() and removeClass(). Everything under the first menu (Red) works fine. All clicks well. However everything under the second menu (Blue) doesn't click well. How come? How do I make this work?</p>

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

&lt;script type="text/javascript"&gt;
$(document).ready(function(){

    $("#red_cont").addClass("hide");
    $("#blue_cont").addClass("hide");

  $("#red_button").click(function(){
    $("#blue_cont").addClass("hide");
    $("#red_cont").removeClass("hide");
  });

  $("#blue_button").click(function(){
    $("#red_cont").addClass("hide");
    $("#blue_cont").removeClass("hide");
  });


    $("#sect_1").addClass("hide");
    $("#sect_2").addClass("hide");
    $("#sect_3").addClass("hide");

  $("#sect_1_button").click(function(){
    $("#sect_2, #sect_3").addClass("hide");
    $("#sect_1").removeClass("hide");
  });

  $("#sect_2_button").click(function(){
    $("#sect_1, #sect_3").addClass("hide");
    $("#sect_2").removeClass("hide");
  });

  $("#sect_3_button").click(function(){
    $("#sect_1, #sect_2").addClass("hide");
    $("#sect_3").removeClass("hide");
  });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id="red_button"&gt;Red&lt;/p&gt;
&lt;p id="blue_button"&gt;Blue&lt;/p&gt;
&lt;hr /&gt;

&lt;div class="total_cont" id="red_cont"&gt;
&lt;p id="sect_1_button"&gt;Red section 1&lt;/p&gt;
&lt;p id="sect_2_button"&gt;Red section 2&lt;/p&gt;
&lt;p id="sect_3_button"&gt;Red section 3&lt;/p&gt;
&lt;hr /&gt;

    &lt;div class="total_sect" id="sect_1"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="total_sect" id="sect_2"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="total_sect" id="sect_3"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- END red_cont --&gt;



&lt;div class="total_cont" id="blue_cont"&gt;
&lt;p id="sect_1_button"&gt;Blue section 1&lt;/p&gt;
&lt;p id="sect_2_button"&gt;Blue section 2&lt;/p&gt;
&lt;p id="sect_3_button"&gt;Blue section 3&lt;/p&gt;
&lt;hr /&gt;

    &lt;div class="total_sect" id="sect_1"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
            &lt;li&gt;Section 1 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="total_sect" id="sect_2"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
            &lt;li&gt;Section 2 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="total_sect" id="sect_3"&gt;
        &lt;ul&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
            &lt;li&gt;Section 3 item&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- END blue_cont --&gt;
</code></pre>
