JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="minimum-option">
  <input type="checkbox" class="check-minimum" name="zoro" value="2670" id="">2670
</div>
<div class="extra-options">
  <input type="checkbox" class="check" value="" id="one" data-percentage="17">
  <input type="checkbox" class="check" value="" id="two" data-percentage="5">
  <input type="checkbox" class="check" value="" id="three" data-percentage="10">
</div>

<div id="total">0</div>

JavaScript

$('input:checkbox').on('change', function () {
  var sum = 0;

  var optionPercentage = $(this).attr('data-percentage');
	var $total = $('#total').text();
  var percentage = (($total * optionPercentage) / 100);
  var grandTotal = (parseFloat($total) + parseFloat(percentage)).toFixed(2);

  $('.check').each(function () {
		console.log(percentage);
    if (this.checked) {
      sum = sum + parseFloat($(this).val());
    }

  });

  $('#total').text(sum);

}).trigger("change");

$('[name="zoro"]').change(function() {
	var minimumPrice = 2670;
  if ($(this).is(':checked')) {
    $('#total').text(minimumPrice);
  }
});