为什么元素的解锁会失败?

我的流星应用程序使用模板。动态地用下一个模板替换上一个模板。我在"main" html文件中这样设置:

<div class="container">
   {{> postTravelWizard}}
</div>
</body>
<template name="postTravelWizard">
    {{> Template.dynamic template=getStepTemplate}}
    <button type="button" name="nextStep" id="nextStep">Next</button>
</template>

…这里是一些相关的JavaScript代码:

   Session.setDefault('stepNum', 1);
   Template.postTravelWizard.helpers({
        getStepTemplate: function () {
            var step = Session.get('stepNum');
            switch (step) {
                case 5:
                  return 'tblFundOrgAccountActivityAmount';
                  break;
                case 4:
                  return 'tblExpenseDescription';
                  break;
                case 3:
                    return 'tblPayments';
                    break;
                case 2:
                    return 'tblTravelerInfo2';
                    break;
                default:
                    return 'tblTravelerInfo';
                    break;
            }
        }
    }); // Template.postTravelWizard.helpers

这一切都工作得很好——但不是非常好，因为我的HTMLTable"columns"，我像这样隐藏:

<template name="tblExpenseDescription">
  <button type="button" name="addDate" id="addDate">Add another Date</button>
  <br />
  <table class="maintable" name="tblExpDesc" id="tblExpDesc" border="1">
    <tr>
        <td class="centertextnowrap"><strong>Description of Expense</strong></td>
        <td class="centertext"><label>Date 1: </label><input type="date" id="date1" name="date1"/></td>
        <td class="centertext hide"><label>Date 2: </label><input type="date" id="date2" name="date2"/></td>
        <td class="centertext hide"><label>Date 3: </label><input type="date" id="date3" name="date3"/></td>
        <td class="centertext hide"><label>Date 4: </label><input type="date" id="date4" name="date4"/></td>
        <td class="centertext hide"><label>Date 5: </label><input type="date" id="date5" name="date5"/></td>
        <td class="centertext hide"><label>Date 6: </label><input type="date" id="date6" name="date6"/></td>
        <td class="skybluebackground centertext"><label><strong>Total Expenses</strong></label></td>
        <td colspan="4" class="nobordercell centertext"><label>Comments</label></td>
    </tr>
. . .
</template>

…(通过将某些HTML元素指定为CSS"hide"类)在单击"Add Another Date"按钮时不会取消隐藏。这个类是:

.hide {
  visibility: hidden;
  display: none;
}

第一次点击"添加另一个日期"按钮，它应该显示/取消隐藏/显示日期2的"列";如果用户再次点击它，它应该显示日期3的"列"，等等。下面是代码:

   Session.setDefault('nextDate', 1);
   . . .
   Template.postTravelWizard.events({
    'click #addDate': function(event){
       var nextD8 = Session.get('nextDate');
       nextD8 = ++nextD8;
       Session.set('nextDate', nextD8);
       if (nextD8 == 2) {
          $("#date2").removeClass("hide");
          $("#airfare2").removeClass("hide");
          $("#pcm2").removeClass("hide");
          $("#reimbursemlg2").removeClass("hide");
          $("#rcei2").removeClass("hide");
          $("#ot2").removeClass("hide");
          $("#parktolls2").removeClass("hide");
          $("#confreg2").removeClass("hide");
          $("#lodging2").removeClass("hide");
          $("#mealsandI2").removeClass("hide");
          $("#foreignanddomestic2").removeClass("hide");
          $("#miscandenter2").removeClass("hide");
          $("#totals2").removeClass("hide");
       } // If/when this works, add code for the others, or figure out a less brute-forcish way to accomplish the same thing
    } // 'click #addDate': function(event){
}); // Template.postTravelWizard.events

没有错误消息，但是删除这些元素上的"hide"类没有任何作用。为什么不呢?