Shopify - Show inline element on varient select - ruby

Question

Currently I am trying to show/hide an inline element on the page when a specific variant of the product is selected in a <select> input. I've tried multiple tries with jquery to access the select with no luck and even tried inline <% if %> liquid tag. Any help would be greatly appreciated!
Basically I want a textbox to show when two of the options are selected else not show the textbox.
Below is what I have:
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
Now if only I could add something like below to add the textbox when option1 or option2 are selected.
<-- Same as above -->
{% if product.variants.size > 1 %}
<div id="product-variants" class="card_options">
<select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
{% endif %}
<-- End Same as above -->
<-- New Code -->
{% if variant != option1 %}
<p class="line-item-property__field" id=card_message>
<label for="card-message">Card Message:</label>
<span id="char-counter"></span><span id="message-alert"></span>
<textarea id="message-textarea" maxlength="250" name="properties[Card Message]"></textarea>
</p>
{% else %}
<span id="placeholder"></span>
{% endif %}
This is what it should look like:

Answer 1

UPDATE: Apparently my solution with jQuery worked. I was just targeting the wrong select on the page. I had to retrieve the select dynamically instead of finding it by class or id. For some reason Shopify creates a second <select> input and hides the one you see in products.liquid document. So I had to resort to using $(".selector-wrapper select").bind('change', function(event) {//do something} and var selected = $('.selector-wrapper select option:selected').val(); to retrieve the values of the options. I'll link a fiddle I created with the same logic, you will just have to update it with what I listed above. Hope this helps anyone looking for same solution.
Fiddle Demo