d3 adding and removing classes with checkboxx. One box works, one does not

I have to check boxes in my code that add a "hidden" class to elements if they are unchecked, and remove it if it is checked. The top checkbox works great- but the second does nothing. Anyone have any ideas what might be going wrong here?? Full code looks like this:

this.$node.append('input')
    .attr('type', 'checkbox')
    .attr('checked', true)
    .attr('value', 'med')
    .on('click', () => this.updateRectMed());

this.$node.append('text')
      .text('Medications')
      .attr('padding', 5);

this.$node.append('input')
        .attr('type', 'checkbox')
        .attr('checked', true)
        .attr('value', 'Pro')
        .on('click', () => this.updateRectPro());

this.$node.append('text')
      .text('Procedures')
      .attr('padding', 5);

  }

private updateRectMed() {

      //var rect = this.$node.getElementsByClassName('.MEDICATION');
      var cbMed = select("input[type='checkbox']").property("checked");
      if (!cbMed) selectAll(".MEDICATION").classed('hidden', true);

      else selectAll(".MEDICATION").classed('hidden', false);

}


private updateRectPro() {


     var cbPro = this.$node.select("input[type='checkbox']").property("checked");
      if (!cbPro) selectAll(".PROCEDURE").classed('hidden', true);

      else selectAll(".PROCEDURE").classed('hidden', false);

}