JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<div id="carrierCommonDiv">
	<div class="nc_shipping_price_desc">Prices below reflect&nbsp;<span urlPath="/checkout/shipping_policy_popup.jsp?policy=shipping" relativeObj="shippingChargePopup" class="shippingLink3 popLink checkout_popLink">shipping charges</span> for your order.</div>
	<div class="nc_shipping_carrier_select">
		<select id="carrierCode" name="carrierCode">
			<option value="UG" shippingTotal="$13.95" selected="selected" desc="">Standard Ground ( $13.95 )</option>
			<option value="UTS" shippingTotal="$22.45" desc="">Third Day Ground ( $22.45 )</option>
			<option value="US" shippingTotal="$27.45" desc="">Second Day Air ( $27.45 )</option>
			<option value="UNN" shippingTotal="$37.25" desc="">Next Day ( $37.25 )</option>
		</select>
	</div>
</div>

JavaScript

$(document).ready(function(){

$("#carrierCode").children("option").each(function() {
    var $div = $('<div></div>', {'class': 'shipOption'});
    
    var text = $(this).text();
    var method = text.substring(0, text.indexOf('('));
    var price = text.substring(text.indexOf('(') + 1, text.indexOf(')'));
    
    var $method_div = $('<div></div>', {'class': 'shipMethod'}).text(method);
    var $price_div = $('<div></div>', {'class': 'shipPrice'}).text(price);


    $div.attr('shippingtotal', price.trim());
    switch(method.trim().toUpperCase()) {
        case 'STANDARD GROUND':
            $div.attr('value', 'UG');
            break;
        case 'THIRD DAY GROUND':
            $div.attr('value', 'UTS');
            break;
        case 'SECOND DAY AIR':
            $div.attr('value', 'US');
            break;
        case 'NEXT DAY':
            $div.attr('value', 'UNN');
            break;
    }

    $method_div.appendTo($div);
    $price_div.appendTo($div);
    
    var $btn = $('<div></div>', {'class': 'selectBtn'});
    var $img = $('<img></img>', {'class': 'selectImg'});
    
    $btn.appendTo($div);
    $img.appendTo($div);
    $('#carrierCode').after($div);
    
});

$('.selectBtn').click(function() {
    $('.selectImg').hide();
    $('.selectBtn').show();
    $(this).hide();
    $(this).next('.selectImg').show();
	var value = $(this).closest('.shipOption').attr('value');
    $('#carrierCode').val(value);
	$('#carrierCode').trigger('change');
});


$('.selectBtn').last().click();


$('.selectImg, #carrierCode').hide();
$('.selectImg').last().show();

//CSS for the shipping options
$('.shipOption').css({
    position: 'relative',
    height: '150px',
    width: '100px',
    margin: '15px 20px 15px 15px',
    padding: '0px 0px 10px 0px',
    display: 'inline-block',
    border: 'solid 1px #999',
    'text-align': 'center',
    float: 'right'
});

$('.shipMethod').css({
    'margin':'25px 10px 10px 10px',
   ...