JSFiddle - React, Tailwind, and code Playground

HTML

<div>Группа 1
  <input class="mycheckbox v100" type="checkbox" name="ch" value="100">100
  <input class="mycheckbox v200" type="checkbox" name="ch" value="200">200
  <input class="mycheckbox v300" type="checkbox" name="ch" value="300">300
  <input class="mycheckbox v400" type="checkbox" name="ch" value="400">400
</div>

<div>Группа 2
  <input class="mycheckbox v100" type="checkbox" name="ch" value="100">100
  <input class="mycheckbox v200" type="checkbox" name="ch" value="200">200
  <input class="mycheckbox v300" type="checkbox" name="ch" value="300">300
  <input class="mycheckbox v400" type="checkbox" name="ch" value="400">400
</div>

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

JavaScript

$(".mycheckbox").change(function() {				
		if ($('.mycheckbox:checked').length > 2) {
			$(this).prop('checked', false);			
			alert("Вы уже выбрали максимальное количество вариантов");	
		}
    $('.v'+$(this).val()).prop('checked', $(this).prop('checked'));
    calculate();		
	});	

	function calculate() {
		
		var sum = 0;
		
		$(".mycheckbox:checked").each(function() {
			sum += parseInt($(this).val(), 10);
		});		
		
		$("#sum").html(sum);			
	}