JSFiddle - React, Tailwind, and code Playground

by CamoMouse

HTML

<p>
  Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>

<p>
  Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">

<p>
  Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">

JavaScript

$(function() {
  var pt3cpt2q1b = "0";
  var pt3cpt2q2b = "0";
  var pt3cpt2total = "0";

  $("*[title^=pt3c-pt2]").change(function() {
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
      $("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
      var pt3cpt2q1b = "50";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    }
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
      $("input[title='pt3c-pt2-q1-other']").val().length === 0) {
      var pt3cpt2q1b = "0";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    } else {}
  });

  $("select[title='pt3c-pt2-q2']").change(function() {
    if ($("select[title='pt3c-pt2-q2']").val() == "True") {
      var pt3cpt2q2b = "50";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    }
    if ($("select[title='pt3c-pt2-q2']").val() == "False") {
      var pt3cpt2q2b = "0";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    } else {}
  });

  $("*[title^=pt3c-pt2]").change(function() {
    pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
    $("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
  });
});