Cacher is the code snippet organizer for pro developers

<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">
  
  <select name="id" id="CustomProductSelect" style="display:none;" class="product-form__variants">
    
    {% for variant in product.variants %}
    {% if variant.available %}
    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
	    data-option1="{{ variant.option1 }}"
	    data-option2="{{ variant.option2 }}"
	    data-optioncode="{{ variant.option2 | append: variant.option1 }}"
	    data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}
    </option>
    {% else %}
    <option disabled="disabled">
      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
    </option>
    {% endif %}
    {% endfor %}
    {% for variant in all_products[altproduct].variants %}
    <option data-option1="{{ variant.option1 }}"
	    data-option2="{{ variant.option2 }}",
	    data-optioncode="{{ variant.option2 | append: variant.option1 }}"
	    
	    data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}
    </option>
    {% endfor %}
    
  </select>
  
  <div class="product-form__item product-form__item--quantity">
    <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
    <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input">
  </div>
  <div class="product-form__item product-form__item--submit">
    <button type="submit" name="add" id="AddToCart" class="btn btn--full product-form__cart-submit">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
  </div>
</form>

<script>

var option1PossibleVariants = [];
$("#CustomProductSelect").children().each(function(){
var val = $(this).data("option1");
if ($.inArray(val, option1PossibleVariants) != -1){
return;
} else {
option1PossibleVariants.push(val);

}
});
var out = "<div class=selector-wrapper product-form__item'><select> ";
  $.each(option1PossibleVariants, function(index, value){
  out += "<option>";
  out += value;
  out += "</option>";
  });
  out += "</select></div>";
$("#CustomProductSelect").parent().prepend(out);


var option2PossibleVariants = [];
$("#CustomProductSelect").children().each(function(){
var val = $(this).data("option2");
if ($.inArray(val, option2PossibleVariants) != -1){
return;
} else {
option2PossibleVariants.push(val);

}
});

var nout = "<div class=selector-wrapper product-form__item'><select> ";
  
  $.each(option2PossibleVariants, function(index, value){
  nout += "<option>";
  nout += value;
  nout += "</option>";
  });
  nout += "</select></div>";
$("#CustomProductSelect").parent().prepend(nout);

</script>