JSFiddle - React, Tailwind, and code Playground

by Pranshu Agrawal

HTML

<div class="Licorice Flavors">
<select id="Licorice">
<option selected disabled>Licorice Flavor</option>
<option value="1">Green Apple</option>
<option value="2">Blue Raspberry</option>
<option value="3">Red Raspberry</option>
<option value="4">Watermelon</option>
<option value="5">Chocolate</option>
<option value="6">Orange</option>
<option value="7">Piña Colada</option>
</select>
</div>
<div class="Chocolate Color">
<select id="Chocolate">
<option selected disabled>Chocolate Color</option>
<option value="8">White Chocolate</option>
<option value="9">Dark Chocolate</option>
</select>
</div>

<div class="Toppings">
<select id="Toppings">
<option selected disabled>Toppings</option>
<option value="10">Christmas Sprinkles</option>
<option value="11">Rainbow Sprinkles</option>
<option value="12">Valentine's Day</option>
</select>
</div>

<a href="#" id="link">Add to Cart</a>
<div id="result"></div>

<script type="text/javascript">
document.getElementById('link').onclick = function() {

    var a = document.getElementById('Licorice').value;
    var b = document.getElementById('Chocolate').value;
    var c = document.getElementById('Toppings').value;

    var answer = [a,b,c].join(", ");



        document.getElementById('result').innerText = answer;

};
</script>