JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
         ...

CSS

.hidden {
  display: none;
}

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}`);
     ...