Почему локальный код состояния с несколькими переключателями работает в jsfiddle, а не на моей веб-странице?

Question

В последнем вопросе мне помогли создать код, чтобы сохранить состояние довольно сложного состояния переключения. Если выбран переключатель, флажок сдвигается вниз, а при выборе этого флажка - другой. Обратное также происходит. Большая часть кода я не понимаю. Проблема в том, что он отлично работает в jsfiddle.

https://jsfiddle.net/tomik23/ovysmutL/7/

Однако он не работает на моей веб-странице. Когда localstorage восстанавливает состояние обратно на веб-страницу после обновления страницы, она автоматически «снимает» флажки примерно через 2 секунды после загрузки, когда они должны были оставаться отмеченными.

Я полностью удалил свою страницу, чтобы попытаться изолировать эту проблему ... проблема все еще существует. Я прочитал и попробовал все подобные проблемы, связанные с переполнением стека, например (измененные формы, добавленная функция готовности документа и т. Д.) ... но, очевидно, ни одна из них не помогла.

Код работает до вставки локального хранилища. Когда страница обновляется, localstorage восстанавливает состояние обратно на веб-страницу, но автоматически снимает флажки примерно через 2 секунды после загрузки, когда они должны были оставаться отмеченными. Кто-нибудь знает, что происходит, и как это исправить? Я действительно ценю помощь.

   **HTML**

    <form class="form" id="form-a" method="post" autocomplete="on">
    <fieldset>
      <div>
        <p>
          <label class="yes_text">Yes</label>
          <span>
            <input type="radio" data-show="next-a" id="dog" name="answer_name" value="yes">
          </span>
        </p>
        <p>
          <label>No</label>
          <span>
            <input type="radio" name="answer_name" value="no" checked>
          </span>
        </p>
      </div>
    </fieldset>
    <fieldset id="next-a" class="hidden">
      <div class="red">
        <div>
          <p>Include Red Dogs:</p>
        </div>
        <div>
          <p>
            <label class="yes_text_include">select to include</label>
            <span>
              <input type="checkbox" data-show="next-b" id="cat" class="red" name="red_name" value="">
            </span>
          </p>
        </div>
      </div>
      <div id="next-b" class="hidden">
        <div>
          <p>Include Green Dogs:</p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="green_name" class="cat" value="">
            </span>
          </p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="blue_name" class="cat" value="">
            </span>
          </p>
        </div>
      </div>
    </fieldset>
  </form>

  <form class="form" id="form-b" method="post" autocomplete="on">
    <fieldset>
      <div>
        <p>
          <label class="yes_text">Yes</label>
          <span>
            <input type="radio" data-show="next-a" id="dog" name="answer_name" value="yes">
          </span>
        </p>
        <p>
          <label>No</label>
          <span>
            <input type="radio" name="answer_name" value="no" checked>
          </span>
        </p>
      </div>
    </fieldset>
    <fieldset id="next-a" class="hidden">
      <div class="red">
        <div>
          <p>Include Red Dogs:</p>
        </div>
        <div>
          <p>
            <label class="yes_text_include">select to include</label>
            <span>
              <input type="checkbox" data-show="next-b" id="cat" class="red" name="red_name" value="">
            </span>
          </p>
        </div>
      </div>
      <div id="next-b" class="hidden">
        <div>
          <p>Include Green Dogs:</p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="green_name" class="cat" value="">
            </span>
          </p>
        </div>
      </div>
    </fieldset>
  </form>



  **Javascript**

    class CheckForm {
  constructor(option) {
    const forms = document.querySelectorAll(`${option}`);
    forms.forEach(form => {
      const formname = form.id;
      this.formCheck(formname);
      this.checkChecked(formname);
    });
  }

  formCheck(formName) {
    const form = document.querySelector(`#${formName}`);
    form.addEventListener('click', e => {
      const { target: { type, value, id, dataset: { show } } } = e;

      switch (type) {
        case 'radio': {
          if (value === 'yes') {
            $(`#${formName}`).find(`#${show}`).show(200);
            this.saveToLocalstore(formName);
          } else {
            $(`#${formName} fieldset`).next().hide(200);
            document.querySelector(`#${formName}`).reset();
            localStorage.removeItem(formName);
            this.removeAllChecked(formName);
          }
          break;
        }
        case 'checkbox': {
          $(`#${formName}`).find(`#${show}`).toggle(200);
          this.saveToLocalstore(formName);
          if (id) {
            this.removeAllChecked(formName, id);
          }
          break;
        }
        default:
          break;
      }
    });
  }

  saveToLocalstore(formName) {
    let allInput = document.querySelectorAll(`#${formName} input`);
    let object = {};
    allInput.forEach(item => {
      object[item.name] = item.type === 'radio' ? true : item.checked;
    });

    localStorage.setItem(formName, JSON.stringify(object));
  }

  checkChecked(formName) {
    const data = JSON.parse(localStorage.getItem(formName));
    if (data) {
      let i = 1;
      for (let [key, value] of Object.entries(data)) {
        const item = document.querySelector(`#${formName} input[name='${key}']`);
        setTimeout(() => {
          if (value) {
            item.click();
          }
        }, i * 1000);
        i++;
      }
    }
  }

  removeAllChecked(formName, id) {
    if (id) {
      let allInput = document.querySelectorAll(`#${formName} .${id}`);
      allInput.forEach(item => {
        item.checked = false;
      });
    } else {
      const allHidden = document.querySelectorAll(`#${formName} .hidden`);
      allHidden.forEach(item => {
        item.removeAttribute('style', '');
      });
    }
  }

}

new CheckForm('.form');



 **CSS**

    .hidden {
  display: none;
}