Why the loadmore don't load and show the specific number of kids?

I tried to create a loadmore button. it doesn't load a specific number of kids. Help me, just tell me the problem. I tried to create a loadmore button. it doesn't load a specific number of kids. Help me, just tell me the problem. I tried to create a loadmore button. it doesn't load a specific number of kids. Help me, just tell me the problem.

 <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
  </div>
   <div id="father">
    <div id="kid" style="display: none;" > I love you</div>
  </div>
  <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
  </div>
  <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
  </div>
   <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
  </div>
  <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
   </div>
   <div id="father">
  <div id="kid" style="display: none;" > I love you</div>
   </div>
   <div id="loadMore" style="">
     <a href="#">Loadmore</a>
   </div>

  <script>
   $( document ).ready(function () {
  $("#kid").slice(0, 3).show();
  if ($("#father").length != 0) {
     $("#loadMore").show();
  }     
  $("#loadMore").on('click', function (e) {
     e.preventDefault();
     $("#kid").slice(0, 6).slideDown();
     if ($("#kid").length == 0) {
        $("#loadMore").fadeOut('slow');
      }
        });
     });
   </script>