title: hide specific divs after clicking on other div using jQuery
body: <p>I am quite new in jQuery. </p>
  
  <p>I have a html code as below which is generated on the fly and added to my page:</p>
  
  <pre><code>
  &#60;div class="outstandingcallback"&#62;
  &#60;span&#62;a&#60;/span&#62;
  &#60;span&#62;b&#60;/span&#62;
  &#60;/div&#62;
  &#60;div class="outstandingcallback"&#62;
  &#60;span&#62;c&#60;/span&#62;
  &#60;span&#62;d&#60;/span&#62;
  &#60;/div&#62;
      ......
  </code></pre>
  
  <p>I need to hide one of them when I click on the other one.
  I used following jQuery but I am not sure how can I hide the div element.</p>
  
  <pre><code>
      $('.outstandingcallback').bind('click', function () {
                  var selectdCallItemID = $(".callItemID", this).html();
  
  
                  var myHtmlCode = $('#CallBacks').html();
  
                  $('' + myHtmlCode + '').find('div').each(function () {
                      var thisCallID = $(".callItemID", this).html();
  
                      if (thisCallID == selectdCallItemID ) {
                          alert("test");
                          $('' + myHtmlCode + '').find(this).hide();
                      }
                  });
              });
  </code></pre>
  
  <p>I am not sure about the following part:</p>
  
  <pre><code>
      $('' + myHtmlCode + '').find(this).hide();
  </code></pre>