jQuery toggleClass适用于某些元素，但不适用其他元素(也使用Mustache)

Question

我试图创建一个HTML表单，用户可以单击添加按钮来创建另一个字段，每个字段都可以切换，只有最近添加的字段打开，其余的关闭。我得到了添加部分的工作，我使用一个类。hide(显示:none)来隐藏面板。下面是我的代码:

$("document").ready(function() {
            var template = $("#treatment-template").html(),
                $target = $("#all-treatments"), // in html, where dynamic templates should be inserted
                $btnAdd = $("#add-treatment"),
                max = 10,
                count = 1,
                inputRow = [],
                allCounts = [];

            $btnAdd.click(function(e){
              e.preventDefault();
              addRows();
              togglePanels();
            });

        function addRows(){
          if(count <= max){
            inputRow = {
              count : count
            }
            var html = Mustache.to_html(template, inputRow);
            $target.append(html);

            if(count > 1){
                for(var i =1; i<count;i++){
                    $("#invisible-part"+i).addClass("hide");
                }               
            }
            allCounts.push(count);
            count++;
          }else{
            $msg.text('too many fields!');
          }
        }

        function togglePanels(){
            console.log(allCounts);
            $.each(allCounts, function(index,value){
                $("#show"+value).on('click',function(){
                    console.log(this);
                    $("#invisible-part"+value).toggleClass("hide");
                });
            });
        }
        addRows();  

这是我的Mustache代码:

<div class="treatment-wrapper">
            <div class="row visible-part" id="visible-part{{count}}">
                <p class="treatmentid inline-block"> TREATMENT {{count}} 
                </p>
                <div id="show{{count}}" class="angledown inline-block">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x icon-background2"></i>
                                    <i class="fa fa-angle-down fa-stack-1x"></i>
                                </span>
                </div>
            </div>
            <div class="invisible-part" id="invisible-part{{count}}">
                <div class="row">
                    <div class="col-lg-6">
                        <label for="start-treatment{{count}}">Start Date</label>
                        <input type="text" id="start-treatment{{count}}" name="start-treatment{{count}}" required value="yyyy-mm-dd">
                    </div>
                    <div class="col-lg-6">
                        <label for="end-treatment{{count}}">End Date</label>
                        <input type="text" id="end-treatment{{count}}" name="end-treatment{{count}}" required value="yyyy-mm-dd">
                    </div>
                </div>
          </div> <!-- end invisible part -->
  </div><!-- end treatment-wrapper -->

然而，由于某些原因togglePanels()函数不是很有效。例如，当有两个字段/面板添加，那么他们都工作，而如果有三个字段/面板，那么只有最后一个是可切换的，如果有四个字段/面板，那么一个，两个和四个工作，但不是三个。似乎没有一个一致的模式，我对此很困惑。

Answer 1

删除每个循环和函数，执行以下操作:

 $('body').on('click','#add-treatment',function(e){
          e.preventDefault();
          addRows();
 });
 $('body').on('click','.angledown',function(){
       $(this).closest('.visible-part').next().toggleClass("hide");
 });