jquery checkbox if statement not working anymore

Question

letterChr, numberChr, and symbolChr were originally designated as ids but had to update them recently to a class after I needed second set of buttons (which I did on both the html and javascript) and while every variation works the if statement to set the global variable to 4 doesn't and it instead defaults to 3. any help would be appreciated.

the javascript code

var letterChr = $('.letters')
var numberChr = $('.numbers')
var symbolsChr = $('.characters')

function SelectorChr() {
  if (letterChr.is(':checked') && numberChr.is(':checked') && symbolsChr.is(':checked')) {
    chooser = 1
    console.log('checked')
  } else if (letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':not(:checked)')) {
    chooser = 3
    console.log('checked 3')

  } else if (letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':checked')) {
    chooser = 4
    console.log('checked 4')
  } else {
    chooser = 0
    alert('No checkboxes have been selected')
    return
  }
}

the html code

<ul class="list-group list-group-flush">
  <li class="list-group-item">
    <label for="letters">Letters</label>
    <input type="checkbox" class="letters">
  </li>
  <li class="list-group-item">
    <label for="numbers">Numbers</label>
    <input type="checkbox" class="numbers">
  </li>
  <li class="list-group-item">
    <label for="characters">Characters</label>
    <input type="checkbox" class="characters">
  </li>
</ul>

Answer 1

I made a simple html page to test your code, and what I find is that you shouldn't use the numberChr.is(':not(:checked)') instead you should use !numberChr.is(':checked'). see the code sample below. I think this is what you were looking for.

<ul class="list-group list-group-flush">
    <li class="list-group-item">
      <label for="letters">Letters</label>
      <input type="checkbox" class="letters">
    </li>
    <li class="list-group-item">
      <label for="numbers">Numbers</label>
      <input type="checkbox" class="numbers">
    </li>
    <li class="list-group-item">
      <label for="characters">Characters</label>
      <input type="checkbox" class="characters">
    </li>
  </ul>
  <script type="text/javascript">
        var letterChr = $('.letters')
        var numberChr = $('.numbers')
        var symbolsChr = $('.characters')

        function SelectorChr(){
            if (letterChr.is(':checked') && numberChr.is(':checked') && symbolsChr.is(':checked')) {
                chooser = 1
                console.log('checked')
            } else if (letterChr.is(':checked') && !numberChr.is(':checked') && !symbolsChr.is(':checked')) {
                chooser = 3
                console.log('checked 3')

            } else if (letterChr.is(':checked') && !numberChr.is(':checked') && symbolsChr.is(':checked')) {
                chooser = 4
                console.log('checked 4')
            } else {
                chooser = 0
                alert('No checkboxes have been selected')
                return
            }
        }
  </script>

Answer 2

so the problem only seems to persist as long as the second button set stays and only with the specific conditions of 4. So I resolved it by adding an element remove function outside the document.ready function and called it a day.

So thank you everyone for helping me out I greatly appreciated it.