JSFiddle - React, Tailwind, and code Playground

by John Crafts

HTML

<div id="product-14">
<p class="price">
69
</p>

<div class="form-field form-field-wide wc_bookings_field_duration">

<input type="number" value="2" step="1" min="2" max="4" name="wc_bookings_field_duration" id="wc_bookings_field_duration">
</div>
</div>

JavaScript

var large = '<b>Party Duration:</b><br><select id="bookingDuration"><option value="1h">1 Hour</option><option value="1-5h">1.5 Hours</option><option value="2h">2 Hours</option></select>';
var pricerange = 'From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>175.00 to <span class="woocommerce-Price-currencySymbol">$</span>300.00</span>';
var two = '<span class="woocommerce-Price-currencySymbol">$</span>175.00</span>';
var three = '<span class="woocommerce-Price-currencySymbol">$</span>250.00</span>';
var four = '<span class="woocommerce-Price-currencySymbol">$</span>300.00</span>';
jQuery(".form-field.form-field-wide.wc_bookings_field_duration").css('display', 'none');
jQuery("p.price").html(pricerange);
jQuery("#product-14 .form-field.form-field-wide.wc_bookings_field_duration").before(large);
jQuery( "#bookingDuration" ).change(function() {
    if (jQuery(this).val() == "1h"){
        jQuery("#wc_bookings_field_duration").attr('value', 2);
        jQuery(".ui-state-active").trigger("click");
        jQuery("p.price").html(two);
    }
    if (jQuery(this).val() == "1-5h"){
        jQuery("#wc_bookings_field_duration").attr('value', 3);
        jQuery(".ui-state-active").trigger("click");
        jQuery("p.price").html(three);
    }
    if (jQuery(this).val() == "2h"){
        jQuery("#wc_bookings_field_duration").attr('value', 4);
        jQuery(".ui-state-active").trigger("click");
        jQuery("p.price").html(four);
    }
});