JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<script>
// OPTIONAL CONFIGURATION //
CFPT = {};
CFPT.prodPrices = { //modify with your product IDs and prices
	'1134877': 224.99
};
// END OPTIONAL CONFIGURATION //
</script>
<script>
/**************************
* Copyright 2017 CF Pro Tools, All Rights Reserved
* Do not share, or distribute this code without author's consent.
* Author: Jaime Smith
* Website: https://cfprotools.com
**************************/

$(function () {
	$('.elOrderProductOptions:not(:has(input,select)), [data-de-type="ors"]').attr('data-title','cf-order-summary');

	$('#bump-offer').off();

	rebuildOrderSummary();
	$('.qty_select, .o2step_step2 [name="purchase[product_id]"], [data-de-type="orpo"] [name="purchase[product_id]"], #bump-offer').on("change", function (ev) {

		$('#bump-offer, [id*="bump_offer_"]').each(function () {
			var bumpId = $(this).val();

			if ($(this).is(':checked')) {
				$('#cfAR [name="purchase[product_ids][]"][value="'+bumpId+'"]').attr('checked', true);
			} else {
				$('#cfAR [name="purchase[product_ids][]"][value="'+bumpId+'"]').attr('checked', false);
			}
		});
		rebuildOrderSummary();
	});
});

function rebuildOrderSummary() {
	var cfpt = window.CFPT || {};
	var prodPrices = cfpt.prodPrices || {};
	var prodSelParent = '[data-de-type="orpo"]';
	var appendTo = '[data-title="cf-order-summary"] .elOrderProductOptions';

	var cartMode = ($('.qty_select').length) ? true : false;

	if ($('.o2step_wrapper').length > 0) {
		prodSelParent = '.o2step_step2';
		appendTo = '[data-title="cf-order-summary"]';
	}

	$('[data-title="cf-order-summary"]').hide();
	if ($('[data-title="cf-order-summary"] .qty-head').length == 0 && $('.qty_select').length > 0) {
		$('[data-title="cf-order-summary"] .elOrderProductOptinLabel .elOrderProductOptinItem').before('<div class="pull-left qty-head">Qty</div>');
	}

	var $summTemplate = $("<div/>").addClass("clearfix elOrderProductOptinProducts");
	$summTemplate.append($("<div/>").addClass("pull-left elOrderProductOptinProductName...