JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h2>Cards</h2>
     <div class="toggle">
        <input type="radio" class="order-option" value="495" data-title="1 Spot Colour - 100 of each" data-card="275" name="specifications" id="specifications-radio1"/>
        <label for="specifications-radio1">100 of each</label>
    </div>
     <div class="toggle">
        <input type="radio" class="order-option" value="550" data-title="1 Spot Colour - 200 of each"  data-card="297"name="specifications" id="specifications-radio2"/>
        <label for="specifications-radio2">200 of each</label>
     </div>
     <div class="toggle">
        <input type="radio" class="order-option" value="605" data-title="1 Spot Colour - 300 of each"  data-card="330"name="specifications" id="specifications-radio3" />
        <label for="specifications-radio3">300 of each</label>
     </div>
     <div class="toggle">
        <input type="radio" class="order-option" value="660" data-title="1 Spot Colour - 400 of each"  data-card="352"name="specifications" id="specifications-radio4"/>
        <label for="specifications-radio4">400 of each</label>
    </div>
</div>
        
<div> 
    <div class="toggle">
	<input type="radio" class="order-option" value="275" data-title="1 Spot Colour added" name="cards" id="cards-radio"/>
	<label for="cards-radio">Add 1 Spot Colour</label>
    </div>
</div>
        
<div class="preview">
	<form method="post">
		<h3 class="order-preview-total">$0 (inc gst)</h3>
		<input type="hidden" id="order-preview-total" name="order_preview_total">
		<div class="order-preview-content"><br></div>
		<input type="hidden" id="order-preview-content" name="order_preview_content">
		<input type="button" class="pcc-mail-send" value="Order Now">
	</form>
</div>

CSS

.order-option {
	display:none;
	margin:10px;
}

.order-option + label {
    display: inline-block;
    margin: 4px 6px 12px;
    padding: 12px;
    background: #56565a;
    color: #fff;
    width: 150px;
    height: 20px;
    text-align: center;
}

.order-option:checked + label {
    background-color: #e5447c;
}

.order-option + label:hover {
	background-color: #e5447c;
	cursor: pointer;
}

JavaScript

$(".toggle").click(function(event) {
    // Prevent the event to be triggered
    // on another element, for the same click
    event.stopImmediatePropagation();
    // We manually check the box, so prevent default
    event.preventDefault();
    
    var radio = $(this).find('input[type="radio"]');

    if (radio.is(':checked')) {
        radio.prop('checked', false);
    } else {
        // Radio elements with the same name
        // will be unchecked automatically
        radio.prop('checked', true);
    }
  
    
    var spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, colour_price = 0, corner_price = 0;
    var spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', colour_desc = '', corner_desc = '';
    
    //card selected and a colour selected
    if($('#cards-radio').is(':checked') && !isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").data('card');
        card_price = parseInt(price);
        card_desc = '<p>'+$('#cards-radio').data('title')+' </p>';
    }
    
    //colour selected
    if(!isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").val();
        spec_price = parseInt(price);
        spec_desc = $("input:radio[name ='specifications']:checked").data('title');
    }
    
    //can be revised like above
    switch($(radio).attr('name')) {
        case 'envelopes':
            env_price = parseInt(radio.val());
            env_desc= '<p>'+radio.data('title')+' </p>';
            break;
        case 'liners':
            liner_price = parseInt(radio.val());
            liner_desc ='<p>'+radio.data('title')+' </p>';
            break;
        case 'colours':
            colour_price = parseInt(radio.val());
            colour_desc = '<p>'+radio.data('title')+' </p>';
            break;
        case 'corners':
            corner_price = parseInt(radio.val());
           ...