JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h2>Cards</h2>
	<input type="radio" class="order-option" value="495" data-title="1 Spot Colour - 100 of each" name="specifications" id="specifications-radio1"/>
	<label for="specifications-radio1">100 of each</label>
	<input type="radio" class="order-option" value="550" data-title="1 Spot Colour - 200 of each" name="specifications" id="specifications-radio2"/>
	<label for="specifications-radio2">200 of each</label>
	<input type="radio" class="order-option" value="605" data-title="1 Spot Colour - 300 of each" name="specifications" id="specifications-radio3" />
	<label for="specifications-radio3">300 of each</label>
	<input type="radio" class="order-option" value="660" data-title="1 Spot Colour - 400 of each" name="specifications" id="specifications-radio4"/>
	<label for="specifications-radio4">400 of each</label>
</div>
        
<div> 
	<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 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

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 = '';

$('.order-option + label').click(function(e) {

	var radio = $(this).attr('for');
	radio = $('#' +radio );

	switch($(radio).attr('name')) {
		case 'specifications':
			spec_price = parseInt(radio.val());
			spec_desc = '<p>'+radio.data('title')+' </p>';
		break;
		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 'cards':
			card_price = parseInt(radio.val());
			card_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());
			corner_desc = '<p>'+radio.data('title')+' </p>';
		break;
	}

	switch($(radio).attr('id')) {
		case 'specifications-radio1':
			$('#cards-radio').val('275');
		break;
		case 'specifications-radio2':
			$('#cards-radio').val('297');
		break;
		case 'specifications-radio3':
			$('#cards-radio').val('330');
		break;
		case 'specifications-radio4':
			$('#cards-radio').val('352');
		break;
	}

	var total_price = +spec_price + env_price + liner_price + card_price + colour_price + corner_price;
	var full_desc = spec_desc + env_desc + liner_desc + card_desc + colour_desc + corner_desc;

	if(radio.is(':checked')) {
		e.preventDefault();
		var subtract = parseInt(radio.val());
		var remove = radio.data('title');
		total_price = total_price - subtract;
		full_desc = full_desc.replace(remove,'');
		radio.removeAttr('checked');
		if($('.order-option:checked').length < 1) {
			spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, total_price = 0, colour_price = 0, corner_price =...