How can I increment the price using a combination of div elements and inputs?

Question

Most of the examples I've seen on the subject have people manipulating input boxes to increment and update the total price accordingly.

My dilemma is that I am using two divs and I am trying to increment the price further when the user checks off the input related to the router option, which only appears if they have either Gigabit or Basic internet selected.

I've set up custom data-attributes data-price=val" for the three items, and I've also managed to at least update the total price when either of the two boxes are selected. I just can't figure out how best to go about incrementing the input/checkbox price onto the total (if checked).

JSFiddle for reference: https://jsfiddle.net/976dc1xd/

Any help/input is greatly appreciated.

Thanks,

-M

var raceInternet = false;
var racePhone = false;
var raceTv = false;

var $internetDiv = $('#race-internet > .itembox'),
    $targetRouter = $('.router-container'),
    $continueDiv = $('#int-continue');

$(function() {
  $internetDiv.on('click', function(){
  	$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
    if($internetDiv.hasClass('user-selected')) {
      $targetRouter.slideDown(300);
      $continueDiv.text('Continue');
      raceInternet = true;
    } else {
      $('#check1').prop('checked', false);
      $targetRouter.slideUp(300);
      $continueDiv.text('Continue without Internet');
      raceInternet = false;
    }
  })
});

// Function to increment Total
$(function() {
  var total = 0;
  $internetDiv.on('click', function() {
    if($(this).is('.user-selected')) {
      total = $(this).data('price');
    } else if ($(this).not('.user-selected')) {
      total = 0;
    }
    $('.int-price').text('$' + total + '/mo');
  })
})

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

p {
	font-size:16px;
}


h2 {
	color:#787878;
	font-weight:700;
}

.divider {
	background-color:#e8e8e8;
	height:2px;
}

.prime-aux {
	position:relative;
	padding:15px;
	-webkit-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
		-moz-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
			box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
	overflow:hidden;
}

.itembox-container {
	display:flex;
}

.boxes-2 {
	width:calc((100% - 25px)/2);
	margin:10px;
	padding: 10px;
}

.itembox {
	position:relative;
	display:inline-block;
	border:5px solid #e8e8e8;
	border-radius:10px;
	cursor:pointer;
}

.user-selected {
	border:5px solid #E16E5B;
}

.itembox h4 {
	color:#22ddc0;
	font-weight:700;
}

span.price {
	display:inline-block;
	font-weight:700;
	float:right;
	color:#22ddc0;
}

.itembox > ul {
	list-style: none;
}

.itembox > ul > li {
	line-height:3;
}

.radial {
	position:absolute;
	float:right;
	height:35px;
	width:35px;
	padding:2px;
	border:5px solid #e8e8e8;
	border-radius:50%;
	top:43%;
	right:10px;
}

.itembox .center-dot {
	display:none;
	position:relative;
	height:21px;
	width:21px;
	background-color:#E16E5B;
	border-radius:50%;
}

.itembox.user-selected .center-dot{
  display: block;
}

/* ===(Internet) Router Item === */

#check1:not(:checked),
#check1:checked {
	position:absolute;
	left:-99999px;
}

#check1:not(:checked) + label,
#check1:checked + label {
  position: relative;
  padding-left:50px;
	font-size:18px;
  cursor: pointer;
}

/* checkbox aspect */
#check1:not(:checked) + label:before,
#check1:checked + label:before {
  content: '';
  position: absolute;
  left:10px;
	top:0;
  width: 25px;
	height: 25px;
  border: 5px solid #e8e8e8;
  border-radius: 5px;
}

/* checked mark aspect */
#check1:not(:checked) + label:after,
#check1:checked + label:after {
  content: '■';
  position: absolute;
  top:-15px;
	left:13px;
  font-size: 35px;
  color: #E16E5B;
}

/* checked mark aspect changes */
#check1:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
#check1:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* disabled checkbox */
#check1:disabled:not(:checked) + label:before,
#check1:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
#check1:disabled:checked + label:after {
  color: #999;
}
#check1:disabled + label {
  color: #aaa;
}

#check1:checked ~ span {
	color:#22ddc0;
}

.router-container {
	display:none;
	height:100%;
}

.router-item {
	margin:25px 0;
	max-width:525px;
	-webkit-animation-delay:.5s;
		-moz-animation-delay:.5s;
			animation-delay:.5s;
}

.router-item label {
	color:#787878;
}

.router-item span {
	float:right;
	color:#787878;
	font-size:18px;
	font-weight:700;
}

/* === Price Bar === */


.price-bar:before {
	content:'';
	display:block;
	background:#e8e8e8;
	height:1px;
	margin:10px;
}

.price-bar p {
	position:relative;
	margin:0;
	top:5px;
	left:10px;
	float:left;
}

/* === Continue Button === */

.continue {
	display:inline-block;
	font-size: 18px;
	color:#fff;
	background-color:#E16E5B;
	border:0;
	border-radius:0;
	float:right;
	margin-right:10px;
}

.continue:hover {
	color:#fff;
	background-color:#E16E5B;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container main"><!-- Primary Content Container -->
      <div class="prime-aux">
        <h2>Internet</h2>
        <hr class="divider"/>
        <div id="race-internet" class="itembox-container">
          <div class="itembox boxes-2 noselect" data-price="60">
            <h4>Gigabit Internet <span class="price">$60/mo</span></h4>
            <ul>
              <li>1,000 Mbps</li>
              <li> No data caps</li>
            </ul>
            <div class="radial">
              <div class="center-dot"></div>
            </div>
          </div>
          <div class="itembox boxes-2 noselect" data-price="25">
            <h4>Basic Internet <span class="price">$25/mo</span></h4>
            <ul>
              <li>25 Mbps</li>
              <li>No data caps</li>
            </ul>
            <div class="radial">
              <div class="center-dot"></div>
            </div>
          </div>
        </div>
        <div class="router-container clear">
          <div class="router-item animated pulse">
            <input id="check1" type="checkbox" name="check" value="check1" data-price="10"/>
            <label class="noselect" for="check1">Add Wi-Fi Router</label>
            <span class="price">+ $10/mo</span>
          </div>
        </div>
        <div class="price-bar">
          <p>Total: <span class="int-price">$0/mo</span></p>
          <div id="int-continue" class="continue btn">Continue without Internet</div>
        </div>
      </div><!-- First Prime Aux End -->
    </section> <!-- Primary Content Container End -->

Answer 1

I'd suggest you to centralize logic, what I did here was to abstract the updatePrice function and bind it to the onClick method to both $routerCheck and $internetDiv selectors.

var $internetDiv = $('#race-internet > .itembox'),
    $routerCheck = $('#check1'),
    $targetRouter = $('.router-container'),
    $continueDiv = $('#int-continue');

$(function() {
  $internetDiv.on('click', updatePrice);
  $routerCheck.on('click', updatePrice);
})

function updatePrice() {
    var total = $('.user-selected').data('price') || 0;

    if ($routerCheck.prop('checked'))
        total += $routerCheck.data('price');

    $('.int-price').text('$' + total + '/mo');
}