jquery - クリック ハンドラーを追加して div を切り替える

Question

にクリックハンドラを追加したい<a id='3'>。s が動的に追加され、リストとして表示されるメインdivがあります。<link-div>CSS やその他の機能を除いた、バグのあるコードのみを投稿しました。<a>それをそれぞれに分離する方法がわかりません<link-div>。アイデアは、それが最初にあるか2<div id="hide">番目にあるかに基づいて、非表示をクリックして表示することです。<link-div>

ここにフィドルの例があります

HTML

  <div id="main">
    <div id="link-div">
      <div class="name-div">               
       <a id='1' href='javascript:void(0);' >(11)</a> 
       <a id='2' href='javascript:void(0);'> Apples </a>
       <a id='3' href='javascript:void(0);'>[click to see more]</a>
      <div id="hide">more apples </div>
     </div>
   </div>
  <div id="link-div"> 
    <div class="name-div">               
      <a id='1' href='javascript:void(0);' > (44) </a> 
      <a id='2' href='javascript:void(0);'>  Bats </a>
      <a id='3' href='javascript:void(0);'>[click  to see more]</a>
      <div id="hide"> more bats</div>
    </div>
  </div>

## Javascript

  $("#main div div div").hide(); /*hide 'more apples', more bats'*/ 

  $("#main div div div > a ").click(function() { /* this is where I need help */
   $("#main div div div").toggle();  /*show 'more apples' or 'more bats' */
  });