JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">
	<h1>What type of website that you want to make?</h1>
	<!-- Part one -->
	<div class="acord_col">
		<div class="img_class" id="exist_site"></div>
		<div class="intro_text">
		</div>
	</div>	
</div>

<div class='total_cost'>
<h1>Your Total Cost is: $<span class="cost_number">0</span><span class="cost_per_page no_display"> + 50/Page</span></h1>
</div>

CSS

.first, .exist_site_cont, .exist_site_static, .exist_site_cms, .static_html_cont, .cms_cont, .graphic_design {
  			text-align: center;
  		}
  		.first h1,
  		.exist_site_cont h1,
  		.exist_site_static h1,
  		.exist_site_cms h1,
  		.static_html_cont h1,
  		.cms_cont h1,
  		.graphic_design h1 {
  			color: white;
  			margin-bottom: 30px;
  			text-transform: uppercase;
  			margin-bottom: 50px;
  		}

  		#exist_site {
			width: 130px;
			height: 130px;
			background: url('http://www.itechinstant.com/wp-content/uploads/2014/06/home.png') center center ;
			background-size: cover;
			-webkit-transition:all 0.3s ease;
			-moz-transition:all 0.3s ease;
			-o-transition:all 0.3s ease;
			transition:all 0.3s ease;
		}

		#exist_site:hover {
			background: url('http://www.itechinstant.com/wp-content/uploads/2014/06/home_h.png') center center;
			background-size: cover;
			-webkit-transition:all 0.3s ease;
			-moz-transition:all 0.3s ease;
			-o-transition:all 0.3s ease;
			transition:all 0.3s ease;
			cursor: pointer;
		}

JavaScript

jQuery(document).ready(function() {
	var total_price = 0;

	jQuery("#exist_site").click(function() {
				var bg = $(this).css('background-image');
				var check_string = 'yes.png';

				if (bg.indexOf(check_string) > -1) {
					jQuery(this).css({
						'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/home.png")',
						'background-size': 'cover'
					})
					total_price -= 200;
					jQuery('.cost_number').empty().append(total_price);

					jQuery("#exist_site").hover(function() {
						jQuery(this).css({
							'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/home_h.png)',
							'background-size' : 'cover'
						})
					})

					// Change the status of detected value
					var boolean_next = parseInt(jQuery('.boolean_goNext').text());
					boolean_next -= 1;
					jQuery('.boolean_goNext').empty().append(boolean_next);

				} else {
					jQuery(this).css({
						'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/yes.png")',
						'background-size': 'cover'
					})
					total_price += 200;
					jQuery('.cost_number').empty().append(total_price);

					// Change the status of detected value
					var boolean_next = parseInt(jQuery('.boolean_goNext').text());
					boolean_next += 1;
					jQuery('.boolean_goNext').empty().append(boolean_next);

				}

			})
})