JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<form id="ppform">
<label><input type="checkbox" name="staff-member" value="item 1"> item 1</label><br>
<label><input type="checkbox" name="staff-member" value="item 2"> item 2</label><br>
<label><input type="checkbox" name="staff-member" value="item 3"> item 3</label><br>
<label><input type="checkbox" name="staff-member" value="item 4"> item 4</label><br>

<strong>Student Names:<br></strong>

1. <input type="text" name="extraname" value=""> <br>
2. <input type="text" name="extraname" value=""> <br>
3. <input type="text" name="extraname" value=""> <br>
4. <input type="text" name="extraname" value=""> <br>
5. <input type="text" name="extraname" value=""> <br>
6. <input type="text" name="extraname" value=""> <br>

<br>Total: <span id="amount"></span></span>
</form>

JavaScript

$("#ppform input[name=extraname], #ppform input:checkbox[name=staff-member] ").change(function(){

	var counter = $(":checkbox[name=staff-member]:checked").length;

	$( "input[name=extraname]" ).each(function( index ) {
				if ($( this ).val() !==''){
					counter++;
				}
	});

	alert('count: ' + counter );
  if (counter==0) {
  		alert('select some folks!')
  } else if (counter == 1) {
  		$("#amount").html('$30');
  } else {
			$("#amount").html('$' + parseInt(30+(parseInt(counter)-1)*5));
	}
});