Jquery click function not working
<p>jQuery is not working with the pop-up div.  What happens is when i click on any of the <code>Click Me</code> text, the pop-up div is shown.  Then i click on either <code>one</code> or <code>two</code> and nothing happens!?  If i click on <code>one</code>, <code>two</code> should disappear and vice versa.</p>

<p>Copy the code below and try for yourself.  What's the solution?</p>

<pre><code>  &lt;html&gt;
    &lt;head&gt;
    &lt;style type="text/css"&gt;
    .ratecontainer {
    display:block;
    float:left;
    height:40px;

    }
    .ratecontainer a {
    color:#FFFFFF;
    text-decoration:none;

    }

    .ratebutton1 {
    padding:5px;
    color:#FFFFFF;
    cursor:pointer;
    background-color:#59758d;
    }

    .ratebutton1:hover {
    background-color:#4a6f8e;

    }
    .ratebutton2 {
    padding:5px;
    color:#FFFFFF;
    cursor:pointer;
    background-color:#59758d;
    }

    .ratebutton2:hover {
    background-color:#4a6f8e;

    }

    #info {
    position:absolute;
    text-align:left;
    width:950px;
    height:auto;
    top:100px;
    left:50%;
    z-index:20;
    margin-left:-475px;

    border:1px solid #000000;
    background-color:#FFFFFF;
    display: none;


    }

    &lt;/style&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

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

        $('.ratebutton1').click(function() {

            $('.ratebutton2').hide();

        });

        $('.ratebutton2').click(function() {

            $('.ratebutton1').hide();

        });

          $('.infobutton').click(function() {

var id = $(this).attr('id');
var row = '#box'+id;

$('#info').css('display','block');
var ninfo = $(row).html();
$('#info').html(ninfo);
});

    });



    &lt;/script&gt;

     &lt;div id="info"&gt;&lt;/div&gt;


&lt;div class="menucontainer"&gt;&lt;a id="0" class='infobutton'&gt;Click Me &lt;/a&gt;&lt;/div&gt;
&lt;div style="display:none;" id="box0"&gt;

    &lt;div class="ratecontainer"&gt;
        &lt;form  action=""&gt;
            &lt;a class="ratebutton1"&gt;One&lt;/a&gt;&lt;a class="ratebutton2"&gt;two&lt;/a&gt;
        &lt;/form&gt;
    &lt;/div&gt;



&lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
