Demo url: https://www.snowfeetstore.com/products/2-pairs

<div class="swtch-mrgn">
<a class="tab-prod-btn" href="/products/2-pairs">2 Pairs</a>
<a class="tab-prod-btn" href="/products/3-pairs">3 Pairs</a>
<a class="tab-prod-btn" href="/products/4-pairs">4 Pairs</a>
<a class="tab-prod-btn" href="/products/5-pairs">5 Pairs</a>
<a class="tab-prod-btn selected" href="/products/10-pairs">10 Pairs</a>
</div>

/* form code  */
{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
<form action="/cart/add" method="post" class="variants cart" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
         
      <select name="id[]" id="productSelect_left" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_right" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_three" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_four" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_five" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_six" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_seven" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_eight" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_nine" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
      <select name="id[]" id="productSelect_ten" class="product-form__variants no-js bundle_slt_border">
        {% for variant in product.variants %}
        <option value="{{ variant.id }}" data-price="{{ variant.price }}" data-com-price="{% if variant.compare_at_price >= variant.price %} {{variant.compare_at_price}} {% else %}{{variant.price}} {% endif %}">
          {{ variant.title }}
        </option>  
        {% endfor %}
      </select>
       
  {% if quantity_enable %}
    <div class="product__quantity product__quantity--{{ variant_type }}">
      <label for="Quantity-{{ section_id }}" class="variant__label">{{ 'products.product.quantity' | t }}</label>
      <input type="number" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1">
    </div>
  {% endif %}

  {%- assign enable_dynamic_buttons = false -%}
  {% if enable_payment_button and template != 'product.preorder' %}
    {%- assign enable_dynamic_buttons = true -%}
  {% endif %}

  {% if enable_dynamic_buttons %}
    <div class="payment-buttons">
  {% endif %}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      data-add-to-cart
      class="{% if enable_dynamic_buttons %}btn btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span data-add-to-cart-text>
        {% if current_variant.available %}
          {% if template == 'product.preorder' %}
            {{ 'products.product.preorder' | t }}
          {% else %}
            {{ 'products.product.add_to_cart' | t }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </button>



  {% if enable_dynamic_buttons %}
    </div>
  {% endif %}

  {% unless product.empty? %}
    <textarea class="hide" aria-hidden="true" data-variant-json>
      {{ product.variants | json }}
    </textarea>
    {% if product.options.size > 1 %}
      <textarea class="hide" aria-hidden="true" data-current-variant-json>
        {{ current_variant | json }}
      </textarea>
    {% endif %}
  {% endunless %}

<!-- <button style="margin-top:2em;" class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button> -->

</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function instantBuy(){
     var $ = jQuery;

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
     
 }
//   $(document).ready(function(){
   
//     calculatePrice()
//     function calculatePrice(){
//       var option,price=0;
//     $('.bundle_slt_border').each(function(){
//       option = $(this).find('option:selected');
//             console.log(option[0].dataset.price,'sdfsdf');
//       price += parseFloat(option[0].dataset.price);
//     });
//       console.log(price,'price');
//       $('.product__price').html(theme.Currency.formatMoney(price,theme.settings.moneyFormat));
//       console.log(theme.Currency.formatMoney(price,theme.settings.moneyFormat),'price');
     
//     }
//     $('.bundle_slt_border').on('change',function(){
//     calculatePrice();
//     });
   
//   })

   $(document).ready(function(){
   
    calculatePrice()
    function calculatePrice(){
      var option,price=0,com_price=0;
      $('.bundle_slt_border').each(function(){
        option = $(this).find('option:selected');
        price += parseFloat(option[0].dataset.price);
        console.log(option[0].dataset.comPrice,'dfsd');
        com_price += parseFloat(option[0].dataset.comPrice);
      });
      $('.product__price').html(theme.Currency.formatMoney(price,theme.settings.moneyFormat));
      $('.product__price--compare').html(theme.Currency.formatMoney(com_price,theme.settings.moneyFormat));

    }
    $('.bundle_slt_border').on('change',function(){
    calculatePrice();
    });
   
  })
 
 
  </script>