Why isn't my add-on product code working in my online store?

[Azis]

So I am trying to add an add-on product instead of a variant (I have my reasons for that), and I am trying to code an alternative (I don't like to use apps for only a single thing), so if the option is yes in the product configuration when the customer clicks "add to cart" it should add 2 products instead of one, but I am getting a 404 error (even tho the page exists), what could be the issue with my code?

<form id="addon-form">
  <label>
    <input type="radio" name="addon" value="yes"> Yes
  </label>
  <label>
    <input type="radio" name="addon" value="no" checked> No
  </label>
</form>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const addonForm = document.getElementById("addon-form");
    const addToCartBtn = document.getElementById("ProductSubmitButton-template--xxxxxxxxx__main");

    addToCartBtn.addEventListener("click", async function (e) {
      e.preventDefault();

      // Determine if the addon should be added
      const addonSelected = addonForm.querySelector('input[name="addon"]:checked').value === "yes";

      // Collect product data
      const productData = [
        {
          id: xxxxxxxxxxxxx,
          quantity: addonSelected ? 1 : 0, // Add addon only if "Yes" is selected
        },
      ];

      const requestBody = {
        items: productData,
      };

      // Add products to cart
      const response = await fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(requestBody),
      });

      // Get updated cart data
      const res = await fetch("/cart.json");
      const cart = await res.json();

      // Update cart count
      document.querySelectorAll(".cart-count-bubble").forEach((el) => {
        el.textContent = cart.item_count;
      });
    });
  });
</script>

[Dan-From-Ryviu]

Hi @Azis 

You can try to use this code without any script. Change YOUR_PRODUCT_ID with ID of your product or variant ID

<a href="/cart/add?id=YOUR_PRODUCT_ID&quantity=2" class="add-to-cart">Add to Cart</a>

[Azis]

The thing, is, I need to cancel the default buy button option which I already did, otherwise I was sending the add and the add.js, so I need now to emulate the function that the normal add was doing, and I am doing that quite nicely, the problem is when I switch the variant it doesn't update, so I need to do some sort of callback function using javascript to when the customer clicks in the change of color it changes the variant in the code as well, but I am not quite sure how to do that.