Different Link depending on Checkbox marked

I need to create 2 containers, where one of them can only be selected an option which in this case is the product, and in the second container I need to have 3 checkboxes, where is the product variable. I need that when, for example, you select “product A” and the “Blue” variation, it gives me a link, but when I select “product B” and the “Blue” variation, it gives me another link and so on, needing 9 different urls

I’ve tried this code here, but i can make it work well

<div class="container">
    <form>
    <div class="bundle-container-1">
        <label for="bundle1" class="bundle-header">Choose your bundle 2:</label>
        <div class="bundle-options">
            <div class="bundle-option active" data-months="3" data-image="" data-url="">
                <input type="checkbox" id="bundle1-0" name="ch" value="0"><br>
                <label for="bundle1-0">3 Month Supply</label>
            </div>
            <div class="bundle-option" data-months="6" data-image="" data-url="">
                <input type="checkbox" id="bundle2-0" name="ch" value="1">
                <label for="bundle2-0">6 Month Supply</label>
            </div>
            <div class="bundle-option" data-months="12" data-image="" data-url="">
                <input type="checkbox" id="bundle3-0" name="ch" value="2">
                <label for="bundle3-0">12 Month Supply</label>
            </div>
        </div>
        <div class="bundle-footer">
            <div class="bundle-price">$297 $169</div>
            <div class="bundle-save">SAVE 43%</div>
        <div class="bundle-container-2">
            <label for="bundle2" class="bundle-header">Choose your bundle 2:</label>
            <div class="bundle-options">
                <div class="bundle-option active" data-months="3" data-image="" data-url="">
                    <input type="checkbox" id="bundle4-0" name="ch" value="4">
                    <label for="bundle4-0">3 Month Supply</label>
                </div>
                <div class="bundle-option" data-months="6" data-image="" data-url="">
                    <input type="checkbox" id="checkbundle2" name="ch">
                    <label for="bundle5-0">6 Month Supply</label>
                </div>
                <div class="bundle-option" data-months="12" data-image="https://via.placeholder.com/500x500" data-url="">
                    <input type="checkbox" id="checkbundle3" name="ch">
                    <label for="bundle6-0">12 Month Supply</label>
                </div>
            </div>
            <div class="bundle-footer">
                <div class="bundle-price">$297 $169</div>
                <div class="bundle-save">SAVE 43%</div>
                <input type="button" class="buttontest" onclick="return newURL()" value="GO URL">
                <button class="add-to-cart" onclick="return newURL()" value="GO URL">Add to Cart - $499</button>
            </form>
            </div>
        </div>
    </div>
</div>

<script>
const options = [
  {
    months: 3,
    image: '',
    price: 169,
    url: ''
  },
  {
    months: 6,
    image: '',
    price: 299,
    url: ''
  },
  {
    months: 12,
    image: '',
    price: 499,
    url: ''
  }
];


const optionsList = document.querySelectorAll('.bundle-option');
const imageContainer = document.querySelector('.image-container img');
const addToCartBtn = document.querySelector('.add-to-cart');

// Update the active option when clicked
optionsList.forEach((option, index) => {
  option.addEventListener('click', () => {
    // Remove the active class from all options
    optionsList.forEach(option => {
      option.classList.remove('active');
    });

    // Add active class to clicked option
    option.classList.add('active');

    // Update the image based on the selected option
    if (option.innerText.includes('3 Month')) {
      imageContainer.src = options[index].image;
    } else if (option.innerText.includes('6 Month')) {
      imageContainer.src = '';
    } else if (option.innerText.includes('12 Month')) {
      imageContainer.src = '';
    }

    // Update the price in the add to cart button
    addToCartBtn.textContent = `Add to Cart - $${options[index].price}`;

    // Update the URL in the add to cart button
    addToCartBtn.dataset.url = options[index].url;

    const bundle2Options = document.querySelectorAll('.bundle-container-2 .bundle-option');
    const addToCartBtn = document.querySelector('.add-to-cart');

bundle2Options.forEach((option, index) => {
  const checkbox = option.querySelector('input[type="checkbox"]');

  checkbox.addEventListener('change', () => {
    if (option.classList.contains('active') && checkbox.checked) {
      addToCartBtn.dataset.url = options[index].url + '-bundle2';
    } else {
      addToCartBtn.dataset.url = options[index].url;
    }
  });
});

  });
});



// Redirect to the selected option URL when Add to Cart button is clicked
addToCartBtn.addEventListener('click', () => {
  window.location.href = addToCartBtn.dataset.url;
});

url = new Array();
    url[0] = new Array();
    url[0][0] = '';
    url[0][1] = ''; 
    url[0][2] = ''; 
    url[1] = new Array();
    url[1][0] = '';
    url[1][1] = '';
    url[2] = new Array();
    url[2][0] = ''; 
    url[2][1] = '';
    url[3] = new Array();
    url[3][0] = ''; 
    url[3][1] = '';
    url[4] = new Array();
    url[4][0] = ''; 
    url[4][1] = '';
    url[5] = new Array();
    url[5][0] = ''; 
    url[5][1] = '';
    url[6] = new Array();
    url[6][0] = '';
    url[6][1] = '';

    function newURL(){
    d = document.forms[0];
    p1 = -1;
    p2 = -1;
    for (i = 0; i < d.ch.length; i++) {
        if (d.ch[i].checked) {
            if (p1 == -1) {
                p1 = i;
            } else if (p2 == -1) {
                p2 = i;
                break;
            } else {
                alert('Too many boxes checked!');
                return false;
            }
        }
    }
    if (p1 == -1) {
        alert('No boxes checked!');
        return false;
    } else if (p2 == -1) {
        window.open(url[p1][0], '_self');
    } else {
        window.open(url[p1][p2 - 1], '_self');
    }
}


</script>
  

<style>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}

.image-container {
  width: 488px;
  height: 488px;
  overflow: hidden;
}


.image-container img {
  width: 100%;
  height: 100%;
}

.bundle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  margin-left: 20px;
}

.bundle-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bundle-options {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.bundle-option {
  width: 33.33%;
  text-align: center;
  padding: 10px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.bundle-option.active {
  background-color: #fff;
  border-color: #f45b69;
  color: #f45b69;
}

.bundle-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bundle-save {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.add-to-cart {
  background-color: #f45b69;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.image-container {
  margin-top: 20px;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buttontest {
  background-color: #f45b69;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

/* teste de css pro 2 container */

.bundle-container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  margin-left: 20px;
}

.bundle-header-2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bundle-options-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.bundle-option-2 {
  width: 33.33%;
  text-align: center;
  padding: 10px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.bundle-option.active {
  background-color: #fff;
  border-color: #f45b69;
  color: #f45b69;
}

.bundle-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bundle-save {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.bundle-option input[type="checkbox"] {
  float: center;
  margin-right: 10px;
  margin-top: 6px;
}

.bundle-option label {
  display: inline-block;
  vertical-align: middle;
}


</style>