JSFiddle - React, Tailwind, and code Playground
HTML
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="3466" data-product_variations="">
<div class="variations" cellspacing="0">
<div class="product_variation">
<div><label for="options">OPTIONS</label></div>
<div class="value">
<select id="options" name="attribute_options">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="variation-description"><p></p></div>
<div>
<button type="button" id="buttonface" class="reseti">Reset</button>
<a class="reset_variations" href="#reset" style="visibility: visible; display: inline;">Clear selection</a> </div>
</div>
</div>
<div class="single_variation_wrap add-to-cart" style="">
<div class="price-box single_variation">
<span class="price">
<span class="amount">$260.00</span>
</span>
<p class="stock in-stock">In stock</p>
</div>
<div class="variations_button">
<input type="hidden" name="variation_id" value="3471" class="jckwt_loading">
<div class="qty">
<label for="qty">Qty:</label>
<input type="number" name="quantity" maxlength="12" value="1" class="input-text qty" id="qty" title="Qty" min="1">
</div>
<button type="submit" class="button btn-cart">
<i class="icon-basket"></i>Add to cart</button>
</div>
</div>
<div>
<input type="hidden" name="add-to-cart" value="3466">
<input type="hidden" name="product_id" value="3466">
...
JavaScript
(function($){
$(function(){
$variation_form = $('.variations_form');
$(".reseti").on('click', function() {
$('.variation-description p').html('reset pressed');
});
$("#options").on('change', function() {
$variation_form.trigger('show_variation');
});
$variation_form.on('show_variation', function (event, variation) {
// set the variation description if the value is set
$('.variation-description p').html('dropdown changed');
})
$variation_form.on('reset_image', function () {
// reset the variation description when reset button is pressed
$('.variation-description p').html('');
});
// $variation_form.trigger('reset_image');
});
})(jQuery);