JSFiddle - React, Tailwind, and code Playground

by mauro_nappolini

HTML

<label for="aioConceptName">AIO Concept Name</label>
<select class="options-list" id="option-set-4778072eda79a36f61e08898bd06abfe">
    <option value="2">Select One</option>
    <option value="53edb7bdbe0854d741ebacfc57a5ae61">Individual</option>
    <option value="8f7ae04b2f7b188b9359952f7a538099">Pair</option>
</select>

<div class="paypal-pay-in-3-cta">
  Payal text 
</div>

<div class="pay-in-three-btn">
  Payal BTN 
</div>

<div class="product-price">
  1500
</div>

JavaScript

document.getElementById("fname").addEventListener("change", myFunction);



let select = document.getElementById('option-set-4778072eda79a36f61e08898bd06abfe');


function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}


select.on('change', function() {
    selectVal = ( $(this).find(":selected").val() );
    console.log(selectVal);
    
    if (selectVal == pair) {
 			 console.log('pair');
       $('.paypal-pay-in-3-cta,.pay-in-three-btn').css( "display", "none" );
       $('.product-price').html("900")
		} else if (selectVal == individual) {
  		console.log('individual');
      $('.paypal-pay-in-3-cta,.pay-in-three-btn').css( "display", "block" );
      $('.product-price').html("1500")
		} 
    
});