One JQuery click event fires, one does not

Question

I have a content editor page that displays the page content in one area and an editor in another. I am displaying a list of items that are marked 'active' in the database and I have a checkbox in the editor for each item that allows you to activate/deactivate that item and when you check/uncheck the checkbox, the list item in the display area should appear/disappear. The code for this is in JQuery.

The lists are dynamically built in PHP, and the all have unique ID's as I am appending the record ID to the end of the ID when rendered. Both JQuery click events are looking for a class. The newsActive snippet is working.

My problem is that for the classList div items are not appearing/disappearing when I check/uncheck the 'active' checkbox. What is strange is that the code logic for both snippets is the same. I copy/pasted the newsActive code snippet and modified it for the classActive snippet, changing the appropriate class names and id's.

I have checked the code over and over. I don't have any duplicated ID's and my page structure is OK. I am at a loss as to why it's not working. Can anyone help?

Update: I added an alert inside a click event at the top of my jquery. First I listened for.newsActive and that triggered the alert. Next I changed it to listen for.classActive and the alert never triggered. Why?

$(".newsActive").click(function() {
  alert("newsactive");
  $('.newsActive').each(function() {
    var ItemId = this.id.match(/\d+/);
    if ($("#newsItemActive" + ItemId).is(":checked")) {
      $("#newsHdrDisplay" + ItemId).css("display", "block");
      $("#newsItemDisplay" + ItemId).css("display", "block");
    } else {
      $("#newsHdrDisplay" + ItemId).css("display", "none");
      $("#newsItemDisplay" + ItemId).css("display", "none");
    }
  });
});


$(".classActive").click(function() {
  alert("classactive");
  $('.classActive').each(function() {
    var ItemId = this.id.match(/\d+/);
    if ($("#classItemActive" + ItemId).is(":checked")) {
      $("#classname" + ItemId).css("display", "inline");
      $("#classdesc" + ItemId).css("display", "inline");
      $("#classlinefiller" + ItemId).css("display", "block");
    } else {
      $("#classname" + ItemId).css("display", "none");
      $("#classdesc" + ItemId).css("display", "none");
      $("#classlinefiller" + ItemId).css("display", "none");
    }
  });
});

<div id="newsList">
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay3' class='newsHdr'>OUR HOURS HAVE CHANGED!</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay3' class='col-12'>We have changed the studio hours for Monday through Thursday to 4:30 p.m. to 9:00 p.m.</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay15' class='newsHdr'>YOU CAN STILL REGISTER FOR CLASSES!</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay15' class='col-12'>Some classes are filling up quickly so it would be best to enroll early to ensure your spot in the class and night of your choice. Mail a Registration Form to our Mailing Address (2410 Allison Drive, JC, MO  65109), email us at grandancers@yahoo.com, bring it to the studio. Come join us for dance! Please call or email if you have a question.  Thanks!</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay2' class='newsHdr'>2019-2020 FALL/SPRING SCHEDULE</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay2' class='col-12'>Download our class schedule so you won't miss a minute! You can find it on the Class Information page.</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        </div>





    <div class="row" id="classList">
        <div class="col-12">
            <span class="subhead">Ballet</span><br/><br/>
            <div>
                <strong><span id='classname1'>Ballet 1:</span></strong>&nbsp;<span id='classdesc1'>ages 7-8 and must have completed Variety 2 or be at least 7 years old for a new student.</span>
            </div>
            <div id='classlinefiller1' class='row tm-20'></div>
            <div>
                <strong><span id='classname2'>Ballet 2, 3, 4, 5:</span></strong>&nbsp;<span id='classdesc2'>must be approved by teacher.</span>
            </div>
            <div id='classlinefiller2' class='row tm-20'></div>
            <div>
                <strong><span id='classname3'>Ballet  PrePointe:</span></strong>&nbsp;<span id='classdesc3'>Focusing on strength and flexibility of ankles, feet, and  toes.  Perfecting the basics.  Teacher approval required.</span>
            </div>
            <div id='classlinefiller3' class='row tm-20'></div><br/>
            
            <span class="subhead">Tap/Jazz</span><br/><br/>
            <div>
                <strong><span id='classname4'>Tap/Jazz 1:</span></strong>&nbsp;<span id='classdesc4'>ages 7 and up or must have completed Variety 2 or be at least 7 years old for a new student.</span>
            </div>
            <div id='classlinefiller4' class='row tm-20'></div>
            <div>
                <strong><span id='classname5'>Tap/Jazz 2:</span></strong>&nbsp;<span id='classdesc5'>must be approved by teacher.</span>
            </div>
            <div id='classlinefiller5' class='row tm-20'></div>
            <div>
                <strong><span id='classname6'>Teen Jazz:</span></strong>&nbsp;<span id='classdesc6'>ages 12 and up.</span>
            </div>
            <div id='classlinefiller6' class='row tm-20'></div>
            <div>
                <strong><span id='classname7'>Adult Tap:</span></strong>&nbsp;<span id='classdesc7'></span>
            </div><div id='classlinefiller7' class='row tm-20'></div>                       
        </div>
    </div>

Answer 1

try change part of your code:

var ItemId = $(this).attr("id").match(/\d+/); //this.id.match(/\d+/);
if ($(this).is(":checked")) {
  //your current code here.
}