please anyone can describe how to change value of product.variants[0].price in javascript

[Mubashir4]

I am working on my client website and need help about variant price, I am not liquid developer but while working on this project getting how know about it, I am customizing product page, in it I want  to call variant price and send it for checkout there is already 3 variant made when started on working it and three variants are call like tis  [0] , [1], [2] but I have created 4th variant and try [4] but not working, need help as soon as possible.

Before I started the working on it, there is dropdowns which I have hide and call the values from there

Thanks

There is custom code

<header>

<div class="row show-for-medium-up">
<div class="columns">
{% if settings.product-breadcrumbs-show %}
{% include 'snippet-breadcrumbs' %}
{% endif %}
</div>

{% comment %} <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
<h3 class="text-primary">CUSTOMIZE YOUR OWN BEER BONG <br> <small>Starting at $15.99</small></h3>
<p class="lead" itemprop="brand">{{ product.description }}</p> {% endcomment %}
</div>
<div class="previous-next row">
{% if collection %}
{% if collection.previous_product or collection.next_product %}
<div class="previous columns large-3 small-6">
{% if collection.previous_product %}
<a class="left" title="Previous Product" href="{{ collection.previous_product}}"><span aria-hidden="true" class="glyph arrow-left"></span> {{ 'products.previous_item' | t }}</a>
{% endif %}
<div class="border-decoration show-for-large-up"></div>
</div>

<div class="next columns large-3 large-offset-6 small-6">
{% if collection.next_product %}
<a class="right" title="Next Product" href="{{ collection.next_product}}">{{ 'products.next_item' | t }} <span aria-hidden="true" class="glyph arrow-right"></span></a>
{% endif %}
<div class="border-decoration show-for-large-up"></div>
</div>
{% endif %}
{% endif %}
</div>
</header>

<article class="row" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
<meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />

<div class="positions active hide-for-js">
<div data-position="title-vendor">
<h1 class="page-title" itemprop="name">{{ product.title }}</h1>
<h3 class="text-primary">CUSTOMIZE YOUR OWN BEER BONG <br> <small>Starting at $15.99</small></h3>
<p class="lead" itemprop="brand">{{ product.description }}</p>
</div>

<div data-position="prices">
<div class="prices">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />

{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}

<p>
{% assign variant = product.selected_or_first_available_variant %}
<span class="actual-price" id="actual-price" itemprop="price"></span>&nbsp;<span class="compare-price">{% if variant.price < variant.compare_at_price %}{{ 'products.was' | t }} {{ variant.compare_at_price | money }}{% endif %}</span>
</p>
</div>
</div>
</div>

<div data-position="photos">
<div class="photos" >
<div class="container">

<div class="row">
<div class="preview-main col-md-8 col-md-offset-2 col-xs-12 col-sm-12">
<img src="//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_black_green_0.png" atl="img" id="main-BAB-img" class="img-responsive"/>
</div>
<!-- <div class="preview-part-1" style="display: block;">
</div>
<div class="preview-part-2" style="display: block;">
<img id="img-part-3" src="">
</div>
<div class="preview-part-3" style="display: block;">
</div> -->
</div>
</div>
</div>
</div>

<div id="thumbs-build-a-bong" hidden >
<div class="thumbs" hidden >
{% if product.images.size > 1 %}
<ul class="clearfix row">
{% for image in product.images %}
<li class="thumb" hidden>
<img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>

<div data-position="cart-form">
<form class="cart-form custom" action="/cart/add" method="post" enctype="multipart/form-data">

{% comment %}
<!-- Adding line items - https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-cus... -->
<div>
<label for="line-item-1">Line Item 1</label>
<input type="text" id="line-item-1" name="properties[line-item-1]">
</div>

<div>
<label for="line-item-2">Line Item 2</label>
<input type="text" id="line-item-2" name="properties[line-item-2]">
</div>
{% endcomment %}


<div class="variants show-field">
<select id="variant-listbox" name="id" class="medium show-field focus" style="display:none">
{% for variant in product.variants %}
<option class="show-field" data-sku="{{ variant.sku }}{{ 'SKU' }}" {% if variant.inventory_quantity <= 0 and variant.available == false %}DISABLED {% endif %}{% if variant == product.selected_or_first_available_variant %}selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }} </option>
{% endfor %}
</select>
</div>

<div class="row">
<!--Select Funnel-->
<p class="line-item-property__field">
<label><h3 class=" lead"><strong class="text-primary" >STEP #1</strong>
Funnel Color</h3></label><br>
<select required class="required show-field medium focus" id="funnel-color" name="properties[Funnel Color]" style="display:none">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="dark-green">dark green</option>
<option value="lime">lime</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="silver">silver</option>
<option value="red">red</option>
<option value="white">white</option>
</select>
</p>

<div>
<input type="radio" name="funnel" value="2_fclear" id="1" checked>
<label class="funneltext">CLEAR</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fwhite" id="2">
<label class="funneltext">WHITE</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fsilver" id="3">
<label class="funneltext">SILVER</label>
</div>
<div>
<input type="radio" name="funnel" value="2_faqua" id="4">
<label class="funneltext">AQUA</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fpink" id="5">
<label class="funneltext">PINK</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fyellow" id="6">
<label class="funneltext">YELLOW</label>
</div>
<div>
<input type="radio" name="funnel" value="2_forange" id="7">
<label class="funneltext">ORANGE</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fglowindark" id="8">
<label class="funneltext">GLOW IN DARK</label>
</div>
<div>
<input type="radio" name="funnel" value="2_felectricgreen" id="9">
<label class="funneltext">ELECTRIC GREEN</label>
</div>

<div>
<input type="radio" name="funnel" value="2_fred" id="9">
<label class="funneltext">RED</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fblue" id="9">
<label class="funneltext">BLUE</label>
</div>

<div>
<input type="radio" name="funnel" value="2_fdarkgreen" id="9">
<label class="funneltext">DARK GREEN</label>
</div>
<div>
<input type="radio" name="funnel" value="2_fpurple" id="9">
<label class="funneltext">PURPLE</label>
</div>

<div>
<input type="radio" name="funnel" value="2_fblack" id="9">
<label class="funneltext">BLACK</label>
</div>

<!--Select Tube Type-->
<!-- <p class="line-item-property__field">
<label><h3>Tube Type</h3></label><br>
<input required class="required" type="radio" name="properties[Tube Type]" value="Standard" checked> <span>Standard</span><br>
<input required class="required" type="radio" name="properties[Tube Type]" value="6ft Xtreme w/On-Off Valve"> <span>6ft Xtreme w/On-Off Valve</span><br>
</p> -->
<!--Select Tube Color-->
<p class="line-item-property__field">
<!-- <label><h3 class=" lead"> <strong class="text-primary"></strong> Tube Color</h3></label><br> -->
<select required class="required show-field medium focus" id="tube-color" name="properties[Tube Color]" focus style="display:none" >
<option value="green">green</option>
<option value="black">black</option>
<option value="blue">blue</option>
<option value="light-blue">light blue</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="silver">silver</option>
<option value="red">red</option>
<option value="white">white</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
</select>
</p>

<div>
<input type="checkbox" id="addon" name="addon" value="2.50">
<label>ADD-ON : VALVE FOR 2 FOOT TUBE ( + $2.50 for 2 Foot Tube)</label>
</div>
<div>
<label><h3 class="lead1"><strong class="text-primary">STEP #2</strong> Tube Color</h3></label>
<h4>2 FOOT TUBE COLORS <h6>(from $15.99 Funnel & Tube Set)</h6></h4>
<div>


<input type="radio" name="tube" value="tclear" id="tube0-0" checked>
<label class="2foottube">Clear</label>
</div>
<div>

<input type="radio" name="tube" value="twhite" id="tube0-1">
<label class="2foottube">WHITE</label>
</div>
<div>

<input type="radio" name="tube" value="tsilver" id="tube0-2">
<label class="2foottube">SILVER</label>
</div>
<div>

<input type="radio" name="tube" value="taqua" id="tube0-3">
<label class="2foottube">AQUA</label>
</div>
<div>

<input type="radio" name="tube" value="tpink" id="tube0-4">
<label class="2foottube">PINK</label>
</div>
<div>

<input type="radio" name="tube" value="tyellow" id="tube0-5">
<label class="2foottube">YELLOW</label>
</div>
<div>

<input type="radio" name="tube" value="torange" id="tube0-6">
<label class="2foottube">ORANGE</label>
</div>
<div>

<input type="radio" name="tube" value="telectricgreen" id="tube0-7">
<label class="2foottube">ELECTRIC GREEN</label>
</div>
<div>

<input type="radio" name="tube" value="tred" id="tube0-8">
<label class="2foottube">RED</label>
</div>
<div>
<input type="radio" name="tube" value="tblue" id="tube0-9">
<label class="2foottube">BLUE</label>
</div>
<div>

<input type="radio" name="tube" value="tpurple" id="tube0-10">
<label class="2foottube">PURPLE</label>
</div>
<div>
<input type="radio" name="tube" value="tblack" id="tube0-10">
<label class="2foottube">BLACK</label>
</div>


</div>
<br />
<br />

<div class="6foot">
<h4>6 FOOT TUBE COLORS W/ VALVE <h6>($19.99 Funnel & Tube Set)</h6></h4>
<div>


<input type="radio" name="tube" value="6clear" id="tube1-0">
<label class="2foottube">CLEAR</label>
</div>
<div>

<input type="radio" name="tube" value="6white" id="tube1-1">
<label class="2foottube">WHITE</label>
</div>
<div>

<input type="radio" name="tube" value="6silver" id="tube1-2">
<label class="2foottube">SILVER</label>
</div>
<div>

<input type="radio" name="tube" value="6aqua" id="tube1-3">
<label class="2foottube">AQUA</label>
</div>
<div>

<input type="radio" name="tube" value="6pink" id="tube1-4">
<label class="2foottube">PINK</label>
</div>
<div>

<input type="radio" name="tube" value="6yellow" id="tube1-5">
<label class="2foottube">YELLOW</label>
</div>
<div>

<input type="radio" name="tube" value="6orange" id="tube1-6">
<label class="2foottube">ORANGE</label>
</div>
<div>

<input type="radio" name="tube" value="6electricgreen" id="tube1-7">
<label class="2foottube">ELECTRIC GREEN</label>
</div>
<div>

<input type="radio" name="tube" value="6red" id="tube1-8">
<label class="2foottube">RED</label>
</div>
<div>

<input type="radio" name="tube" value="6blue" id="tube1-9">
<label class="2foottube">BLUE</label>
</div>
<div>

<input type="radio" name="tube" value="6black" id="tube1-10">
<label class="2foottube">BLACK</label>
</div>

</div>
<br />
<br />
<div class="doubleheader">
<h4>DOUBLE HEADER TUBE COLOR COMBOS W/ 2 VALVES<h6>($21.99 Funnel & Tube Set)</h6></h4>
<div>


<input type="radio" name="tube" value="dclearblack" id="tube2-0">
<label class="2foottube">CLEAR/BLACK</label>
</div>
<div>

<input type="radio" name="tube" value="dwhitewhite" id="tube2-1">
<label class="2foottube">WHITE/WHITE</label>
</div>
<div>

<input type="radio" name="tube" value="dsilverblack" id="tube2-2">
<label class="2foottube">SILVER/BLACK</label>
</div>
<div>

<input type="radio" name="tube" value="daquaaqua" id="tube2-3">
<label class="2foottube">AQUA/AQUA</label>
</div>
<div>

<input type="radio" name="tube" value="dpinkpink" id="tube2-4">
<label class="2foottube">PINK/PINK</label>
</div>
<div>

<input type="radio" name="tube" value="dyellowyellow" id="tube2-5">
<label class="2foottube">YELLOW/YELLOW</label>
</div>
<div>

<input type="radio" name="tube" value="dorangeorange" id="tube2-6">
<label class="2foottube">ORANGE/ORANGE</label>
</div>
<div>

<input type="radio" name="tube" value="delectricgreenelectricgreen" id="tube2-7">
<label class="2foottube">ELECTRIC GREEN/ELECTRIC GREEN</label>
</div>
<div>

<input type="radio" name="tube" value="dredred" id="tube2-8">
<label class="2foottube">RED/RED</label>
</div>
<div>

<input type="radio" name="tube" value="dblueblue" id="tube2-9">
<label class="2foottube">BLUE/BLUE</label>
</div>
<div>

<input type="radio" name="tube" value="dpurplepurple" id="tube2-10">
<label class="2foottube">PURPLE/PURPLE</label>
</div>

<div>

<input type="radio" name="tube" value="dblackwhite id="tube2-10">
<label class="2foottube">BLACK/WHITE</label>
</div>

</div>
<!--Select Add-On/Off-Valve-->
<!-- <p class="line-item-property__field">
<label><h3>Add On/Off-Value</h3></label><br>
<input required class="required" type="radio" name="properties[Add On/Off-Value]" value="Yes"> <span>Yes</span><br>
<input required class="required" type="radio" name="properties[Add On/Off-Value]" value="No" checked> <span>No</span><br>
</p> -->
</div>

<div class="quanity-cart-row clearfix">
{% include 'snippet-quantity' %}

<div class="add-to-cart">
<input type="submit" name="add" id="add" value="{{ 'products.add_to_cart' | t }}" class="purchase button">
</div>
</div>
</form>

{% include 'snippet-product-unavailable' %}

</div>

<div data-position="description">
<div class="description" >
<div itemprop="description" class="rte-content">
<div class="text-center">
<h2 class="lead"> <i class=" text-danger fa fa-youtube-play"></i> You Tube Demos </h2>
<iframe width="300" height="200" src="https://www.youtube.com/embed/3Lpwy-43IGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

</div>

<!-- Positions & Ordering -->

<!-- Mobile -->
<div class="positions show-for-small columns">
<div data-position="title-vendor"></div>
<div data-position="prices"></div>
<div data-position="photos"></div>
<div data-position="thumbs" class="text-center"></div>
<div data-position="cart-form"></div>
<div data-position="description"></div>
</div>

<!-- Medium Screens -->
<div class="positions show-for-medium-only">
<div class="columns large-6">
<div data-position="title-vendor"></div>
<div data-position="prices"></div>
<div data-position="cart-form"></div>
<div data-position="thumbs"></div>
<div data-position="description"></div>
</div>

<div class="columns large-6">
<div data-position="photos"></div>
</div>
</div>

<!-- Large Screens -->
<div class="positions show-for-large-up">
<div class="columns large-3">
{% if settings.product-position-title-vendor == 'left' %}
<div data-position="title-vendor"></div>
{% endif %}
{% if settings.product-position-price == 'left' %}
<div data-position="prices"></div>
{% endif %}
{% if settings.product-position-form == 'left' %}
<div data-position="cart-form"></div>
{% endif %}
{% if settings.product-position-thumbs == 'left' %}
<div data-position="thumbs"></div>
{% endif %}
{% if settings.product-position-description == 'left' %}
<div data-position="description"></div>
{% endif %}
</div>

<div class="columns large-6">
<div data-position="photos"></div>
{% if settings.product-position-thumbs == 'center' %}
<div data-position="thumbs" class="text-center"></div>
{% endif %}
</div>

<div class="columns large-3">
{% if settings.product-position-title-vendor == 'right' %}
<div data-position="title-vendor"></div>
{% endif %}
{% if settings.product-position-price == 'right' %}
<div data-position="prices"></div>
{% endif %}
{% if settings.product-position-form == 'right' %}
<div data-position="cart-form"></div>
{% endif %}
{% if settings.product-position-thumbs == 'right' %}
<div data-position="thumbs"></div>
{% endif %}
{% if settings.product-position-description == 'right' %}
<div data-position="description"></div>
{% endif %}
</div>
</div>
</article>

{% if settings.product-share-this-show %}
<section class="row social-share">
<div class="columns">
{% include 'snippet-product-share' with 'product-template' %}
</div>
</section>
{% endif %}

{% if settings.product-similar-products-show %}
{% include 'snippet-related-products' %}
{% endif %}

{% if settings.product-modal-enabled %}
<div class="modal">
<div class="loading"></div>
<a aria-hidden="true" class="prev glyph slider-left"></a>
<a aria-hidden="true" class="close glyph cross"></a>
<a aria-hidden="true" class="next glyph slider-right"></a>
<div class="slides"></div>
</div>
<div class="modal-mask"></div>
{% endif %}

<script>
// variables to pass to shop.js
var selectCallback = '';
var product_title = '{{ product.title | escape }}';
var product_variant_size = {{ product.variants.size }};
var product_options_size = {{ product.options.size }};
var product_options_first = '{{ product.options.first }}';
var product_json = {{ product | json }};
var product_language_was = '{{ 'products.was' | t | escape }}';

// Looking for the selectCallback function?
// You can find it at the bottom of the theme.liquid file
</script>

<script>
var tubeTypeSelected = 'BAB-2';
var tubeColor = $('#tube-color option:selected').text();
var tubeColorVal = $('#tube-color option:selected').val();
var funnelColor = $('#funnel-color option:selected').text();
var funnelColorVal = $('#funnel-color option:selected').val();
$( "select" )
.change(function () {
var str = "";
var n = 0;
var result = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
result = str.split('$').pop();
});
//$( "#actual-price" ).text( '$' + result.split(" ")[1] );
})
.change();
</script>

<script>
$('#variant-listbox').change(function(e) {

funnelColorVal = $('#funnel-color option:first').val();
tubeColorVal = $('#tube-color option:first').val();
$('#variant-listbox').prop('selectedIndex',2);
//xTreme selected
if($(this).children('option:selected').data('sku') == 'BAB-1') {
tubeTypeSelected = 'BAB-1';
$('#funnel-color').prop('selectedIndex',0);
$('#tube-color').prop('selectedIndex',0);
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
$("#tube-color option[value='light-blue'], #tube-color option[value='pink'], #tube-color option[value='purple'], #tube-color option[value='silver'], #tube-color option[value='white'], #tube-color option[value='light_blue'], #tube-color option[value='orange'], #tube-color option[value='yellow']").hide();

} //Standard With Valve selected
else if($(this).children('option:selected').data('sku') == 'BAB-3') {
tubeTypeSelected = 'BAB-3';
$('#funnel-color').prop('selectedIndex',0);
$('#tube-color').prop('selectedIndex',0);
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
$("#tube-color option[value='lightblue'], #tube-color option[value='pink'], #tube-color option[value='purple'], #tube-color option[value='silver'], #tube-color option[value='white'], #tube-color option[value='orange'], #tube-color option[value='yellow']").show();
} //Standard selected
else {
tubeTypeSelected = 'BAB-2';
$('#funnel-color').prop('selectedIndex',0);
$('#tube-color').prop('selectedIndex',0);
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
$("#tube-color option[value='lightblue'], #tube-color option[value='pink'], #tube-color option[value='purple'], #tube-color option[value='silver'], #tube-color option[value='white'], #tube-color option[value='orange'], #tube-color option[value='yellow']").show();
}
});

</script>

<script>
$('#tube-color').change(function() {
tubeColorVal = $(this).val() || "";
if( tubeTypeSelected == 'BAB-1') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else if (tubeTypeSelected == 'BAB-3') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else{
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
}
});
</script>

<script>
$('#funnel-color').change(function() {
funnelColorVal = $(this).val() || "";
alert(funnelColorVal);
if( tubeTypeSelected == 'BAB-1') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else if (tubeTypeSelected == 'BAB-3') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
}
// $('.preview-part-1').css("background", "url('//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/" +funnelColorVal+"_funnel.png?8435492330116722213') no-repeat 0% 100%");
});
</script>

<script>
$('#savechecklist').click(function() {
var retVal = $('input[name="funnel"]:checked').val();
alert(retVal);
funnelColorVal = retVal; //$(this).val() || "";
if( tubeTypeSelected == 'BAB-1') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else if (tubeTypeSelected == 'BAB-3') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
}
});

</script>

<script>
$('#savetubecolor').click(function() {
var retVal1 = $('input[name="tube"]:checked').val();

alert(retVal1);

tubeColorVal = retVal1; //$(this).val() || "";
if( tubeTypeSelected == 'BAB-1') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else if (tubeTypeSelected == 'BAB-3') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else{
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
}
//$( "#actual-price" ).text( '$' + {{ product.variants[2].price}} );
//$('#variant-listbox').prop('selectedIndex',2);
});

</script>

<script>
$(function() {
$('input[name="funnel"]').on("change", function() {
var retVal = $('input[name="funnel"]:checked').val();
funnelColorVal = retVal;
// alert('1');
if( tubeTypeSelected == 'BAB-1') {
alert('2');
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_1.png");

} else if (tubeTypeSelected == 'BAB-3') {
alert('3');
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else {
//alert('4');
//alert(funnelColorVal);
//alert(tubeColorVal);
$('#main-BAB-img').attr("src", "https://cdn.shopify.com/s/files/1/1051/1156/files/"+funnelColorVal+"_"+tubeColorVal+".png");
}
var id = $(this).attr('id');
$('#funnel-color').prop('selectedIndex', id-1);
})
});

</script>
<script>
$(function() {
$('input[name="tube"]').on("change", function() {
var retVal = $('input[name="tube"]:checked').val();
tubeColorVal = retVal;
if( tubeTypeSelected == 'BAB-1') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/x_"+funnelColorVal+"_"+tubeColorVal+"_0.png");
} else if (tubeTypeSelected == 'BAB-3') {
$('#main-BAB-img').attr("src", "//cdn.shopify.com/s/files/1/1051/1156/t/6/assets/u_"+funnelColorVal+"_"+tubeColorVal+"_1.png");
} else{
//alert(funnelColorVal);
//alert(tubeColorVal);
$('#main-BAB-img').attr("src", "https://cdn.shopify.com/s/files/1/1051/1156/files/"+funnelColorVal+"_"+tubeColorVal+".png");
}
var id = $(this).attr('id');
var tubetype = id.split('-')[0];
if(tubetype === 'tube2'){

$('#variant-listbox').prop('selectedIndex', 2);
}
else if(tubetype === 'tube1'){

$('#variant-listbox').prop('selectedIndex', 1);
}
else if(tubetype === 'tube0'){


if($(addon).prop('checked')) {
var listBox = document.getElementById("variant-listbox");
listBox.options.length = 0;

var myOptions = {{product.variants | json}};

console.log(myOptions);

var mySelect = $('#variant-listbox');
$.each(myOptions, function(val, text) {
// alert(val);
if(val === 0){
var addonval = $('#addon').val();
var addval = parseFloat(15.99);
var addval2 = parseFloat(addonval);
var result = addval + addval2;
result = result.toFixed(2);
//alert(addval);

text.price = result;
// alert(text.price);
//{{product.variants[0].price }} = {{ 1650 }};



// {{ my_variable }}

// var price = product.variants[0].price;
//alert(price);

var item = text.title + " - " + "$ " + result;
mySelect.append(
$('<option></option>').val(text.id).html(item));
}
else{
var item = text.title + " - " + "$ " + text.price;
mySelect.append(
$('<option></option>').val(val).html(item));
}


});

// alert("Checked Box Selected");

$('#variant-listbox').prop('selectedIndex', 0);
} else {
//alert("Checked Box deselect");
}

}
var tubeindex = id.split('-')[1];
$('#tube-color').prop('selectedIndex', tubeindex);

});

});

</script>