JSFiddle - React, Tailwind, and code Playground

HTML

<select id="k1" onchange="kes1();" name="kelayakan1" size="1">
  <option value="">-- Pilih Salah Satu --</option>
  <option value="1">Layak</option>
  <option value="0">Tidak Layak</option>
</select>
<br>
<select id="k2" onchange="kes2();" name="kelayakan2" size="1">
  <option value="">-- Pilih Salah Satu --</option>
  <option value="1">Layak</option>
  <option value="0">Tidak Layak</option>
</select>
<br>
<br>
<table style="width:30%;" border="1">
  <thead>
    <tr>
      <th colspan="5">TES</th>
    </tr>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <div id="aa1" class="layak" style="text-align:center;"></div>
      </td>
      <td>
        <div id="aa2" style="text-align:center;"></div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <div id="bb1" class="layak" style="text-align:center;"></div>
      </td>
      <td>
        <div id="bb2" style="text-align:center;"></div>
      </td>
    </tr>
    <tr>
      <td>Result</td>
      <td>
        <div id="hasil1" style="text-align:center;"></div>
      </td>
      <td>
        <div id="hasil2" style="text-align:center;"></div>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br> 
I want to calculate A1 and A2, B1 and B2 and appear on result.. 
<br>
if 1+0=1, if 1+1=2, if 0+0=0
<br>
but still can't working well :(

JavaScript

function kes1() {
        var ap = document.getElementById('k1').value;
        var satu = 1;
        var nol = 0;
				var aa1 = document.getElementById('aa1');
        var aa2 = document.getElementById('aa2');
        var bb1 = document.getElementById('bb1');
        var bb2 = document.getElementById('bb2');
        var output1 = document.getElementById('hasil1');
        var output2 = document.getElementById('hasil2');
        if (ap == "1") {
          aa1.innerHTML = satu;
          aa2.innerHTML = nol;
        } else {
          aa1.innerHTML = nol;
          aa2.innerHTML = satu;
        }
        sum(aa1.innerHTML, bb1.innerHTML,output1);
        sum(aa2.innerHTML, bb2.innerHTML,output2);
      }

      function kes2() {
        var bp = document.getElementById('k2').value;
        var satu = 1;
        var nol = 0;
        var aa1 = document.getElementById('aa1');
        var aa2 = document.getElementById('aa2');
        var bb1 = document.getElementById('bb1');
        var bb2 = document.getElementById('bb2');
        var output1 = document.getElementById('hasil1');
        var output2 = document.getElementById('hasil2');

        if (bp == "1") {
          bb1.innerHTML = satu;
          bb2.innerHTML = nol;
        } else {
          bb1.innerHTML = nol;
          bb2.innerHTML = satu;
        }
        sum(aa1.innerHTML, bb1.innerHTML,output1);
        sum(aa2.innerHTML, bb2.innerHTML,output2);
      }
      
      function sum(value1, value2, output) {
      	if (isNumber(value1) && isNumber(value2)) {
          output.innerHTML = parseFloat(value1) + parseFloat(value2);
        }
      }
      
      function isNumber(n) {
 		    return !isNaN(parseFloat(n)) && isFinite(n);
      }



      /*
            function hitung5() {
        var ap=document.getElementById('aa1').value;
        var bp=document.getElementById('bb1').value;
        var cp=document.getElementById('cc1').value;
        var dp=document.getElementById('dd1').value;
        var...