JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/bernii/select-variants.js/master/select-variants.min.js"></script>
<html>
<body>
<h1>Select-Variants.js DEMO</h1>
<form>
  <p>Ok, it's really simple. Just play with the form below and you'll know what it is all about without reading the docs ;)</p>
  <div id="form-container"></div>
  <input type="submit" class="submit"></input>
  <input type="hidden" name="last_selected" id="selected_id"></input>
</form>
<p>
  <!-- Here goes the price of currently selected item variant -->
  Price: <span class="price"></span>
</p>
<p>
  <!-- How *exactly* the selected item looks like -->
  Selected item: <pre class="item">none</pre>
</p>
    </body></html>

CSS

form{
  width: 250px; text-align: right; 
}
form label{
  display: block; 
}
form select{
  margin-left: 10px;
}

JavaScript

(function(){var Variant,VariantForm,Variants,cloneObject;var __indexOf=Array.prototype.indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(this[i]===item)return i;}
return-1;};cloneObject=function(obj){var clone,k;clone={};for(k in obj){if(typeof obj[k]==="object"){clone[k]=cloneObject(obj[i]);}else{clone[k]=obj[k];}}
return clone;};Variants=(function(){function Variants(){}
Variants.prototype._variants=[];Variants.prototype.names=[];Variants.prototype.add=function(variant,values){var name;for(name in variant){if(!(__indexOf.call(this.names,name)>=0)){this.names.push(name);}}
return this._variants.push(new Variant(variant,values));};Variants.prototype.get=function(variant){if(variant in this._variants){return this._variants[variant];}
return 0;};Variants.prototype._checks=[];Variants.prototype.addCheck=function(checkFunction){return this._checks.push(checkFunction);};Variants.prototype.getVariant=function(selected_vals){var all_value_equal,checkFunc,checkResult,key,quantity,val,variant,_i,_j,_len,_len2,_ref,_ref2;_ref=this._variants;for(_i=0,_len=_ref.length;_i<_len;_i++){variant=_ref[_i];all_value_equal=true;for(key in variant.variant){val=variant.variant[key]+"";quantity=variant.quantity;checkResult=false;_ref2=this._checks;for(_j=0,_len2=_ref2.length;_j<_len2;_j++){checkFunc=_ref2[_j];checkResult=checkFunc(variant);if(checkResult){break;}}
if(selected_vals[key]&&selected_vals[key]!==val||checkResult){all_value_equal=false;}}
if(all_value_equal){return variant;}}
return null;};Variants.prototype.getTypes=function(){return this.names;};Variants.prototype.getVariants=function(name,current_state){var elem,in_variants,is_available,that,variants,_i,_len,_ref;if(current_state==null){current_state=null;}
variants=[];that=this;in_variants=function(val){var variant,_i,_len;for(_i=0,_len=variants.length;_i<_len;_i++){variant=variants[_i];if(variant.value===val){return true;}}
return false;};is_available=function(name,val){var...