I am developing an html form for sports event where the required attributes for name, guardian, dob, school and class classes are added or removed dynamically when one field is non empty or every field is empty. After using pikaday datepicker for dob field when i clear the dob field other field's required attribes are not removed dynamically. Please fix this if you can.Here is my javascript code-

document.addEventListener("DOMContentLoaded", function () {
  // Initialize Pikaday datepicker for each form
  const formConfigs = {
    form1: {
      minDate: new Date(2018, 0, 1),
      apiUrl:
        ";,
      redirectUrl: "./group2.html",
    },
    form2: {
      minDate: new Date(2016, 0, 1),
      apiUrl:
        ";,
      redirectUrl: "./group3.html",
    },
    form3: { minDate: new Date(2014, 0, 1), apiUrl: "", redirectUrl: "" },
  };

  Object.keys(formConfigs).forEach((formId) => {
    const form = document.getElementById(formId);
    if (form) {
      const minDate = formConfigs[formId].minDate;
      const dobFields = form.querySelectorAll(".dob");

      dobFields.forEach((field) => {
        const picker = new Pikaday({
          field: field,
          format: "DD/MM/YYYY",
          toString: (date, format) => {
            const day = date.getDate().toString().padStart(2, "0");
            const month = (date.getMonth() + 1).toString().padStart(2, "0");
            const year = date.getFullYear();
            return `${day}/${month}/${year}`;
          },
          parse: (dateString, format) => {
            const parts = dateString.split("/");
            const day = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1;
            const year = parseInt(parts[2], 10);
            return new Date(year, month, day);
          },
          yearRange: [1900, 2100],
          minDate: minDate,
          showDaysInNextAndPreviousMonths: true,
          enableSelectionDaysInNextAndPreviousMonths: true,
          onSelect: function () {
            console.log("Date selected:", picker.getDate()); // Debug log
            updateRequiredAttributes(form);
          },
        });

        // Store the Pikaday instance in the field
        field._pikaday = picker;

        // Sync calendar with manually entered dates
        field.addEventListener("input", function (e) {
          const dateValue = e.target.value;
          const parsedDate = picker.parse(dateValue, "DD/MM/YYYY");
          console.log("Input value:", dateValue); // Debug log
          if (parsedDate && !isNaN(parsedDate)) {
            picker.setDate(parsedDate, true);
          } else if (!dateValue.trim()) {
            picker.setDate(null); // Clear the Pikaday value
            console.log("Pikaday state cleared."); // Debug log for confirmation
          }
          updateRequiredAttributes(form);
        });

        // Add forward slashes automatically
        field.addEventListener("input", function (e) {
          const input = e.target;
          let value = input.value.replace(/\D/g, "");
          if (value.length > 2)
            value = `${value.slice(0, 2)}/${value.slice(2)}`;
          if (value.length > 5)
            value = `${value.slice(0, 5)}/${value.slice(5)}`;
          input.value = value;
          updateRequiredAttributes(form);
        });
      });

      // Form validation and submission logic
      const t = document.getElementById("msg");
      let r = false;

      function n(e, t) {
        i(e);
        const r = document.createElement("span");
        r.className = "error-message";
        r.style.color = "red";
        r.style.fontWeight = "bold";
        r.textContent = t;
        e.insertAdjacentElement("afterend", r);
      }

      function i(e) {
        const t = e.parentElement.querySelector(".error-message");
        t && t.remove();
      }

      function updateRequiredAttributes(form) {
        form.querySelectorAll(".event").forEach((event) => {
          const r = event.querySelector(".name"),
            n = event.querySelector(".guardian"),
            i = event.querySelector(".dob"),
            p = event.querySelector(".school"),
            o = event.querySelector(".class");

          if (
            r.value.trim() ||
            n.value.trim() ||
            i.value.trim() ||
            p.value.trim() ||
            o.value.trim()
          ) {
            r.setAttribute("required", "required");
            n.setAttribute("required", "required");
            i.setAttribute("required", "required");
            p.setAttribute("required", "required");
            o.setAttribute("required", "required");
          } else {
            r.removeAttribute("required");
            n.removeAttribute("required");
            i.removeAttribute("required");
            p.removeAttribute("required");
            o.removeAttribute("required");
          }
        });
      }

      form.addEventListener("input", function (e) {
        if (
          ["name", "guardian", "dob", "school", "class"].some((t) =>
            e.target.classList.contains(t)
          )
        ) {
          i(e.target);
          updateRequiredAttributes(form);
        }
      });

      form.addEventListener("submit", function (i) {
        i.preventDefault();
        let o = false,
          a = null;

        document.querySelectorAll(".event").forEach((e) => {
          const t = e.querySelector(".name"),
            r = e.querySelector(".guardian");
          t &&
            "" !== t.value.trim() &&
            t.value.trim().length < 3 &&
            (n(t, "Competitor's Name must be at least 3 characters long."),
            a || (a = t),
            (o = true)),
            r &&
              "" !== r.value.trim() &&
              r.value.trim().length < 3 &&
              (n(r, "Guardian's Name must be at least 3 characters long."),
              a || (a = r),
              (o = true));
        });

        if ((a && a.focus(), o || r)) return;

        r = true;
        let l = document.getElementById("loading-animation");
        if (!l) {
          l = document.createElement("div");
          l.id = "loading-animation";
          l.innerHTML = '<div class="spinner"></div><p>Submitting...</p>';
          document.body.appendChild(l);
        }

        const u = document.querySelector("button[type='submit']");
        u.disabled = true;
        u.innerText = "Submitting...";

        const s = new FormData(form);
        for (let d of s.entries()) console.log(d[0] + ": " + d[1]);

        fetch(formConfigs[formId].apiUrl, { method: "POST", body: s })
          .then((e) => {
            if (!e.ok) throw Error("Network response was not ok");
            return e.json();
          })
          .then((r) => {
            console.log("Success:", r);
            document.body.removeChild(l);
            t.innerHTML = "Form Submitted Successfully";
            t.style.display = "block";

            setTimeout(() => {
              t.innerHTML = "Redirecting...";
              setTimeout(() => {
                window.location.href = formConfigs[formId].redirectUrl;
              }, 3000);
            }, 2000);

            form.reset();
            u.innerText = "Submit";
          })
          .catch((e) => {
            console.error("Error!", e.message);
            document.body.removeChild(l);
            t.innerHTML = "Error occurred! Please try again.";
            t.style.display = "block";
            setTimeout(() => {
              t.innerHTML = "";
              t.style.display = "none";
            }, 5000);
            u.disabled = false;
            u.innerText = "Submit";
            r = false;
          });
      });

      const clearButton = document.getElementById("clearButton");

      function clearForm() {
        form.reset();
        form
          .querySelectorAll(".name, .guardian, .dob, .school, .class")
          .forEach((e) => {
            e.removeAttribute("required");
          });

        form.querySelectorAll(".dob").forEach((field) => {
          const picker = field._pikaday;
          if (picker) {
            picker.setDate(null); // Reset Pikaday's internal date
            console.log("Pikaday instance reset for field:", field); // Debug log
          }
        });
      }

      clearButton &&
        clearButton.addEventListener("click", function (e) {
          e.preventDefault();
          confirm("Do you want to clear the form?") && clearForm();
        });
    }
  });
});