#1 - Add Items To Member JSON v0.1

<!-- 💙 MEMBERSCRIPT #1 v0.1 💙 ADD INDIVIDUAL ITEMS TO MEMBER JSON -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('[ms-code="form1"]');
  
  forms.forEach(form => {
    const jsonType = form.getAttribute("ms-code-json-type");
    const jsonList = form.getAttribute("ms-code-json-list");

    form.addEventListener('submit', async function(event) {
      event.preventDefault(); // Prevent the default form submission

      // Retrieve the current member JSON data
      const memberstack = window.$memberstackDom;
      const member = await memberstack.getMemberJSON();

      // Create a new member.data object if it doesn't already exist
      if (!member.data) {
        member.data = {};
      }

      if (jsonType === "group") {
        // Check if the group already exists
        if (!member.data[jsonList]) {
          // Create a new group object
          member.data[jsonList] = {};
        }

        // Iterate over the inputs with ms-code-json-name attribute
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList][jsonName] = newItem;
        });

        // Log a message to the console for group type
        console.log(`Item(s) have been added to member JSON with group key ${jsonList}.`);
      } else if (jsonType === "array") {
        // Check if the array already exists
        if (!member.data[jsonList]) {
          // Create a new array
          member.data[jsonList] = [];
        }

        // Retrieve the input values for the array type
        const inputs = form.querySelectorAll('[ms-code-json-name]');
        inputs.forEach(input => {
          const jsonName = input.getAttribute('ms-code-json-name');
          const newItem = input.value;
          member.data[jsonList].push(newItem);
        });

        // Log a message to the console for array type
        console.log(`Item(s) have been added to member JSON with array key ${jsonList}.`);
      } else {
        // Retrieve the input value and key for the basic item type
        const input = form.querySelector('[ms-code-json-name]');
        const jsonName = input.getAttribute('ms-code-json-name');
        const newItem = input.value;
        member.data[jsonName] = newItem;

        // Log a message to the console for basic item type
        console.log(`Item ${newItem} has been added to member JSON with key ${jsonName}.`);
      }

      // Update the member JSON with the new data
      await memberstack.updateMemberJSON({
        json: member.data
      });

      // Reset the input values
      const inputs = form.querySelectorAll('[ms-code-json-name]');
      inputs.forEach(input => {
        input.value = "";
      });
    });
  });
});
</script>