JSFiddle - React, Tailwind, and code Playground

HTML

<form class="cart" method="post" enctype="multipart/form-data">
	 	<table id="price_calculator" class="simple_price_calculator">
		<tbody><tr>
		<td><label for="length_needed">Required Length (m)</label></td>
		<td style="text-align:right;">
		
							<select data-unit="m" data-common-unit="m" name="length_needed" id="length_needed" class="amount_needed">
																					<option value="0.500">Fat Quarter</option>
																					<option value="0.25">      1/4m</option>
																					<option value="0.5">      1/2m</option>
																					<option value="0.75">      3/4m</option>
																					<option value="1">      1m</option>
																					<option value="1.5">      1.5m</option>
																					<option value="2">      2m</option>
																					<option value="2.5">      2.5m</option>
																					<option value="3">      3m</option>
																					<option value="3.5">      3.5m</option>
																					<option value="4">      4 m</option>
																					<option value="4.5">      4.5 m</option>
																					<option value="5">      5 m</option>
																					<option value="5.5">      5.5 m</option>
																					<option value="6">      6 m</option>
																					<option value="6.5">      6.5 m</option>
																					<option value="7">      7 m</option>
																					<option value="7.5">      7.5 m</option>
																					<option value="8">      8m</option>
																					<option value="8.5">     8.5m</option>
																					<option value="9">     9m</option>
																					<option value="9.5">     9.5m</option>
																					<option value="10">     10m</option>
									</select>
					</td>
	</tr>
			<tr>
		<td>Selection Price</td>
		<td>
			<span class="product_price"></span>
			<input type="hidden" id="_measurement_needed" name="_measurement_needed" value="0.5">
			<input type="hidden" id="_measurement_needed_unit"...

JavaScript

jQuery(document).ready(function(a) {
    function b(b) {
        var c = null;
        return a.each(wc_price_calculator_params.pricing_rules, function(a, d) {
            return b >= parseFloat(d.range_start) && ("" === d.range_end || b <= d.range_end) ? (c = d, !1) : void 0
        }), c
    }

    function c(a, b, c, d) {
        a = (a + "").replace(/[^0-9+\-Ee.]/g, "");
        var e = isFinite(+a) ? +a : 0,
            f = isFinite(+b) ? Math.abs(b) : 0,
            g = "undefined" == typeof d ? "," : d,
            h = "undefined" == typeof c ? "." : c,
            i = "",
            j = function(a, b) {
                var c = Math.pow(10, b);
                return "" + Math.round(a * c) / c
            };
        return i = (f ? j(e, f) : "" + Math.round(e)).split("."), i[0].length > 3 && (i[0] = i[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, g)), (i[1] || "").length < f && (i[1] = i[1] || "", i[1] += new Array(f - i[1].length + 1).join("0")), i.join(h)
    }

    function d(a, b) {
        return (a + "").replace(new RegExp("[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\" + (b || "") + "-]", "g"), "\\$&")
    }

    function e(a, b, c) {
        return "undefined" != typeof wc_price_calculator_params.unit_normalize_table[b] && ("undefined" != typeof wc_price_calculator_params.unit_normalize_table[b].inverse && wc_price_calculator_params.unit_normalize_table[b].inverse ? a /= wc_price_calculator_params.unit_normalize_table[b].factor : a *= wc_price_calculator_params.unit_normalize_table[b].factor, b = wc_price_calculator_params.unit_normalize_table[b].unit), "undefined" != typeof wc_price_calculator_params.unit_conversion_table[b] && "undefined" != typeof wc_price_calculator_params.unit_conversion_table[b][c] && ("undefined" != typeof wc_price_calculator_params.unit_conversion_table[b][c].inverse && wc_price_calculator_params.unit_conversion_table[b][c].inverse ? a /= wc_price_calculator_params.unit_conversion_table[b][c].factor : a *=...