JSFiddle - React, Tailwind, and code Playground
HTML
<label>How many positive?</label>
<input type="text" name="positive" class="observationPositive">
<br />
<label>How many questionable?</label>
<input type="text" name="questionable" class="observationQuestionable">
<br />
<hr />
<label>How many positive?</label>
<input type="text" name="positive" class="observationPositive">
<br />
<label>How many questionable?</label>
<input type="text" name="questionable" class="observationQuestionable">
<br />
<hr />
<h4><span id="observationTotal"></span> Total for all</h4>
<h4><span id="observationQuestionablePercentage"></span>% Questionable</h4>
<h4><span id="observationPositivePercentage"></span>% Positive</h4>
JavaScript
$('.observationPositive, .observationQuestionable').on("change", function () {
var sumP = 0,
sumQ = 0,
countP = 0,
countQ = 0;
$('.observationPositive').each(function(){
countP++;
sumP += Number($(this).val());
});
$('.observationQuestionable').each(function(){
countQ++;
sumQ += Number($(this).val());
});
var percentP = 100/(1 + (sumQ/sumP));
var percentQ = 100 - percentP;
$("#observationTotal").text(sumP + sumQ);
$("#observationQuestionablePercentage").text(percentQ);
$("#observationPositivePercentage").text(percentP);
});