jQuery hide onLoad not working

Rails 5.1 App, using jquery-rails (loading jQuery 1.12.4). I have a function included in the header of a page that was working. I fixed a missing JS file function error unrelated to this and now it looks right while loading and then flips (looks to be at the time it loads favicons in the Rails console). If I cause the missing method error (in a client side validation JS) then this code works properly, which means there's something else afoot to me.

Once it's flipped, the .togglebutton doesn't function (this fixed with Josh's comment below)

This behavior can be seen live here: https://www.patchvault.org/lodges

The function:

$(document).ready(function() {
  $('.nni').toggleClass('hidden');
  $('.togglebutton').click(function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

Updated function after Josh's comments below (and other SO searching):

$(document).ready(function () {
  $(window).load(function () {
    $('.nni').toggleClass('hidden');
    $(document).on('click', '.togglebutton', function() {
      $('.nni').toggleClass('hidden');
      $('.togglebutton').toggleClass('nodisplay');
    });
  });
});

Toggle Button code:

<div id="button_functions">
    <a class="togglebutton nodisplay" href="javascript:;">Hide No Known Issue Lodges (16)</a>
    <a class="togglebutton" href="javascript:;">Show No Known Issue Lodges (16)</a>
  </div>

relevant CSS:

.hidden,
.nodisplay { display: none; }

LI (example):

<ul class="lodge-list">
  <li class="lodge nni">
      <a href="/lodges/2a-trenton"><img alt="No known issues for 2A" style="width: 200px;" src="/assets/no_known_issues@2x.png"></a>

    <p class="lodge-name">
      <a href="/lodges/2a-trenton"><b>2</b> Trenton</a><br>
      <span>
        (2A)
      </span>
    </p>
  </li>
  <li class="lodge ">
        <a href="/lodges/2-5a-ntiasohen-gattopuin"><img alt="2.5 Ntiasohen Gattopuin" class="featured-image-home" src="https://patchvault.s3.amazonaws.com/uploads/issue/image/4114/list_Fish_Flap_1992.jpg?X-Amz-Expires=600&amp;X-Amz-Date=20180711T120316Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIOPOW7QY5HS62KZA/20180711/us-east-1/s3/aws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=19a5afd4d18ccb7951c756a4916aef200026ac447f45452ca66427480a6f0d27"></a>
      <!-- <= link_to image_tag(lodge.issues.first.image_url(:list)),
            lodge_path(
              lodge.slug
            ) %> -->

    <p class="lodge-name">
      <a href="/lodges/2-5a-ntiasohen-gattopuin"><b>2.5</b> Ntiasohen Gattopuin</a><br>
      <span>
        (2.5A)
      </span>
    </p>
  </li>
  [ Other lodges are one of these two styles ]
</ul>

which is currently running. If I reintroduce the console error (rails client-side form validations missing file), it works. But there's got to be something else going on that I'm doing wrong here to cause this. Any thoughts?

Okay, so the way I was eventually able to solve this was more simple than anything else:

I had the rails ERB that sets "nni" as a class set "nni hidden" instead. So both of those classes apply on page load. From there, the JS is simpler:

$(document).ready(function () {
  $(document).on('click', '.togglebutton', function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

Probably a way to make that simpler/cleaner as well, but it works.