Dynamic CTA button with meta fields does not work in custom store set-up

[sasha_liquid_99]

Hello everyone, I am trying to construct a page on my Shopify instance A where I have a custom product section with two variants and I want to add a dynamic CTA button that generates a check-out on a second Shopify instance B (it's a very specific set-up). For this, I am using cart permalinks and variant meta fields in my Shopify instance A where I store the right variant id from my Shopify instance B. 

I am trying to implement it with a javascript that checks the variant selection, pulls the right variant id from the meta field and generates the href url accordingly ("https://www.shopB.com/cart/'" + "variant-id:1")

After making all edits, the CTA button is not clickable. Any hints why could go wrong? See the code below. 

JS within section liquid:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Select the variant picker element
    var variantPickerSelects = document.querySelectorAll('variant-radios, variant-selects');
    var ctaButton = document.getElementById('dynamic-cta-button');
    var baseUrl = 'https://www.shopB.com/cart/';

    function updateCtaUrl() {
      var selectedOption;
      
      variantPickerSelects.forEach(function(select) {
        var selectElement = select.querySelector('input:checked');
        if (selectElement) {
          selectedOption = selectElement;
        }
      });

      if (selectedOption) {
        var permaValue = selectedOption.getAttribute('data-perma');
        var newUrl = baseUrl + permaValue + ':1,'
        ctaButton.href = newUrl;
        
        // Log the constructed URL
        console.log("Constructed URL: " + newUrl);
      } else {
        console.error("No variant selected");
      }
    }

    // Initialize with the first variant
    updateCtaUrl();

    // Update URL on variant change
    variantPickerSelects.forEach(function(select) {
      select.addEventListener('change', updateCtaUrl);
    });
  });
</script>

product-variant-picker liquid:

{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input">
          <legend class="form__label">{{ option.name }}</legend>
          {% render 'product-variant-options', product: product, option: option, block: block %}
        </fieldset>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block %}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}

      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}

<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
              disabled
            data-variant="{{ variant.id }}"
            
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>