How to have separate variant option dropdowns in spree

I am trying to create products with two seperate variants. I have changed the standard code a little bit so my variant dropdown menu looks like this:

<div id="product-variants" class="col-md-6">
  <h3 class="product-section-title">Colour options</h3>
  <ul class="list-group">
    <li>
      <%= select_tag "variant_id", options_for_select(@product.variants_and_option_values(current_currency).collect{|v| ["#{variant_options(v)}", v.id]})%>
    </li>
  </ul>
</div>

My problem is that I want to create two seperate option types - Outside colour and Inside colour. Currently if I add more variants it just adds them to the same dropdown menu but I am wanting to have the two options seperate.

Basically what I am asking for is how do I make it differentiate between the two. Something like -

product.variants.select do |v|
  v.option_types.include? Spree::OptionValue.find_by_name('Inside')
end

Thanks in advance!

I have managed to get it working. Here is what I did:

<ul class="list-group">
              <li>
                <% outside =  @product.variants_and_option_values(current_currency).collect{|v| ["#{variant_options(v)}", v.id] if variant_options(v).include? 'Outside'} %>
                <%= select_tag "variant_id", options_for_select(outside.compact)%>
              </li>
              <li>
                <% inside =  @product.variants_and_option_values(current_currency).collect{|v| ["#{variant_options(v)}", v.id] if variant_options(v).include? 'Inside'} %>
                <%= select_tag "variant_id_inside", options_for_select(inside.compact)%>
              </li>
</ul>