使用jQuery隐藏/显示div时出错

故事

我们有一个父母（div）。父母可以有n个孩子。父母可以拥有的孩子的数量由PHP变量决定$bigF。

因此，如果$bigF是5，则父母有5个孩子。如果为10，$bigF则为10。但是在此上下文中没有任何作用，因为一旦加载页面，父级将有n个子级。您知道，这不是动态的，这就是我要说的。

<div id="parent">
    <div id="child1" class="click" style="display:block">
         Child1
         <div id="grandchild1A">
             grand child 1A
        </div>
         <div id="grandchild1B">
             grand child 1B
        </div>        
    </div>

     <div id="child2" class="click" style="display:none">
         Child2
         <div id="grandchild2A">
             grand child 2A
        </div>
        <div id="grandchild2B">
             grand child 2B
        </div>
    </div>

      <div id="child3" class="click" style="display:none">
         Child3
         <div id="grandchild3A">
             grand child 3A
        </div>
        <div id="grandchild3B">
             grand child 3B
        </div>
    </div>   
</div>

<br><br><br>
 Calling children down
 <br><br>
  <div class="callchild" data-count="child1"> Call Child 1</div>
  <div class="callchild" data-count="child2"> Call Child 2</div>
  <div class="callchild" data-count="child3"> Call Child 3</div>

在此示例中，父级有3个子级（div），它们的名称分别为child1，child2，child3。为孩子命名的IDK。那是不好的育儿。而这个家庭剧的怪胎是每个孩子有两个孩子（div）。而且它们有奇怪的名称，例如grandchild1A，grandchild1B，grandchild2A等。

父母有点害羞。她认为应该只向外界展示一个孩子。其余的东西保持隐藏状态，可能在地下室或其他地方。但是她的脸上写满了这条大规则。如果我召唤一个孩子，孩子和孙子孙女都应该来。

她雇用了3名警卫，这使她的工作变得轻松。他们是叫孩子1，叫孩子2，叫孩子3。

这就是他们的工作方式。

<script>
    $(".callchild").on('click',function()
    {   
        //var calling = $('div:visible').last().attr('id');
        //alert(calling);        
        var calling = $(this).attr('data-count');
        $("#parent div:visible").hide();
        $('#'+calling).css("display","block");
    });
</script>

但是每次他们叫孩子时，都会发生奇怪的事情。有时孩子和孙子们会聚在一起。还有一些时候，大孩子失踪了。

他们还尝试了另一种方式，例如：

var calling = $('div:visible').last().attr('id');

一无所获。

这是证明。小提琴

谁能帮我调查这个故事？？？我提供感谢作为回报。:)