JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="product">
    <div class="product-image">
        <a href="/collections/all/products/som-sleep-zero-12-pack">Product Link</a>
    </div>


<form action="/collections/all/" method="post" class="form-buy-now original">
              <ul class="variants">
                <li>
                  <input type="radio" name="som-sleep-original" value="som-sleep-original-4-pack" id="radio_original-4pack" />
                  <label for="radio_original-4pack">4 Pack <span class="price"><em>$9.99</em></span></label>
                </li>
                <li>
                  <input type="radio" name="som-sleep-original" value="som-sleep-original-12-pack" id="radio_original-12pack" checked="checked" />
                  <label for="radio_original-12pack">12 Pack <span class="price"><em>$29.99</em></span></label>
                </li>
                <li>
                  <input type="radio" name="som-sleep-original" value="som-sleep-original-24-pack" id="radio_original-24pack" />
                  <label for="radio_original-24pack">24 Pack <span class="price"><em>$59.98</em></span></label>
                </li>
              </ul>

              <p class="order-now">
                <button type="submit" name="add" id="add" class="add-to-cart">Order Now</button>
              </p>
            </form>
    </div>
            
<div class="product">


<div class="product-image">
        <a href="/collections/all/products/som-sleep-zero-12-pack">Product Link</a>
    </div>
            <form action="/collections/all" method="post" class="form-buy-now zero-sugar">
              <ul class="variants">
                <li>
                  <input type="radio" name="som-sleep-zero" value="som-sleep-zero-4-pack" id="radio_zero-4pack" />
                  <label for="radio_zero-4pack">4 Pack <span class="price"><em>$9.99</em></span></label>
                </li>
                <li>
                  <input type="radio" name="som-sleep-zero" value="som-sleep-zero-12-pack"...

SCSS

.red { color: red; }

JavaScript

$('.variants input[type=radio]').change(function(){
	var productURL = $(this).val();
    $(this).closest('.product').find('.product-image a').attr('href', '/collections/all/products/' + productURL);
});

$('.form-buy-now button[type=submit]').on('click', function(e){
	e.preventDefault();
    var selectedProduct = $(this).closest('.form-buy-now').find('.variants input[type=radio]:checked').val();
    window.location.href = "collections/all/products/" + selectedProduct;
});