How can I show a text box only when a specific variant is selected?

[Wishidbeen]

Hey i am trying to set up to have a text box show on one of 2 variants i have (1 is no customization and 1 is customization) There is an extra charge to have text and even tho it is stated multiple times it is an extra fee people still put stuff in it without selecting the correct option. I have been searching for hours to find a way to do it and no luck. Below is the code i currently have in it to allow. I have seen talk of a callback but cant find the info i need on it. If someone could point me in the right direction it would be appreciated. 

<p class="line-item-property__field">
<label for="Add a name"><B>Choose "Customize" option above to add a name</B></label>
<input maxlength="12" id="Add a name" type="text" name="properties[Add a name]"placeholder="ADD NAME HERE +$2.00">
</p>

that code works but like i said people are putting stuff in it without selecting the correct variant. Any help is appreciated 

[BradKrane]

Hook an event listener on the element and callback to an Ajax API call to update the cart.

[petmeadow]

Did you get this to work for your site? I am currently trying to do the same thing and am having difficulty figuring it out. Some of my variants have engraving options while others do not and I would like the engravable ones to have a text box where they can enter the information and the ones that do not have engraving it should be hidden.