title: Jquery click function not working
body: <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>