Ciodensky

Here's the code that works for me:
<div class="industrial"> <select class="industry" id="selection"> <option value="SEL">Select industry</option> <option value="RET">Retail or Online Commerce (2.5 mos)</option> <option value="DIS">Wholesale or Distribution(3 mos)</option> <option value="CON">Contractor (3.5 mos)</option> <option value="MAN">Manufacturing (4 mos)</option> <option value="GEN">General Business (3 mos)</option> <option value="PRO">Professional Services (2.5 mos)</option> <option value="NON">Non-profit (2 mos)</option> </select> </div> <script> $(document).ready(function() { $("#block-yui_3_17_2_1_1635989652851_13463").show(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); }); $('#selection') .on('change', function () { if(this.value === "SEL"){ $("#block-yui_3_17_2_1_1635989652851_13463").show(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "RET"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").show(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "DIS"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").show(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "CON"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").show(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "MAN"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").show(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "GEN"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").show(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "PRO"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").show(); $("#block-yui_3_17_2_1_1640582524994_22034").hide(); } else if(this.value === "NON"){ $("#block-yui_3_17_2_1_1635989652851_13463").hide(); $("#block-yui_3_17_2_1_1640582524994_14253").hide(); $("#block-yui_3_17_2_1_1640582524994_15520").hide(); $("#block-yui_3_17_2_1_1640582524994_16772").hide(); $("#block-yui_3_17_2_1_1640582524994_18056").hide(); $("#block-yui_3_17_2_1_1640582524994_19360").hide(); $("#block-yui_3_17_2_1_1640582524994_20686").hide(); $("#block-yui_3_17_2_1_1640582524994_22034").show(); } }); </script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <style> .industrial{text-align:center;border-radius:6px;width:285px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px} .industry{ height: 35px; width: 80%; margin: auto; border: 1px solid #009051; border-radius: 0.4em; background-color: #209d50; color: #fff; text-align: center; font-size: .7rem; } </style>  

I found the solution!
I added the html on.change javascript right next to my code which was intended only for ready function. Here's my additional code:
<!-- change the text "every 12 months" to "billed annually" in the price --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); $(document).on("change", ".variant-select-wrapper > select", function() { $(".product-price").html(function() { return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>"); }); }); </script>  

@creedon has helped me with this already. I need to scape the " with \" and so it was solved.
Pertaining to the question here, it was solved also with the same code above but with <br> insert right after the $199. So here's the correct code now:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".product-price").html(function() { return $(this).html().replace("$199.00", "<span style=\"font-size: 40px;font-weight:Bold;\">$199<br></span>"); }); }); </script  

Hi Tuan,
Thank you again for replying to this but I already figured out the solution. Please ignore this question as I disregarded this approach and did the coding I got from this site:
https://www.spacetutorials.com/toggle-button-for-content
Thanks agains.

Thank you for replying on this. But I already got the solution from here
https://www.spacetutorials.com/toggle-button-for-content
and do some workaround.
Thanks again @tuanphan