Problem with javascript concatenation of two numbers

Question

I'm working on this calculator project and i've run into serious problems with adding in javascript. My project contains a form that has table where the user inputs numbers into rows and columns. When I try to add the numbers javascript concatenates the numbers together instead of adding them.

I've tried everything from using parseFloat, parseInt, etc. Right now I'm only trying to add up the values that start with B (so B1, B2, B3, etc) and eventually I need to do the same thing with values that start with C. Any help would be greatly appreciated. I've looked up this exact question and nothing seems to work. Ignore the other variable names and other stuff. My code is sloppy currently but that's because I've been trying so many different things. Here's my code:

<form name="classGradeCalc" action>
  <table>
    <tbody>
      <tr>
        <td>Grading Category</td>
        <td>Points Earned</td>
        <td>Max Poins</td>
        <td>Weight</td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a1" value="" /></td>
        <td><input type="number" size="5" id="b1" value="" /></td>
        <td><input type="number" size="5" id="c1" value="" /></td>
        <td><input type="number" size="5" id="d1" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a2" value="" /></td>
        <td><input type="number" size="5" id="b2" value="" /></td>
        <td><input type="number" size="5" id="c2" value="" /></td>
        <td><input type="number" size="5" id="d2" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a3" value="" /></td>
        <td><input type="number" size="5" id="b3" value="" /></td>
        <td><input type="number" size="5" id="c3" value="" /></td>
        <td><input type="number" size="5" id="d3" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a4" value="" /></td>
        <td><input type="number" size="5" id="b4" value="" /></td>
        <td><input type="number" size="5" id="c4" value="" /></td>
        <td><input type="number" size="5" id="d4" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a5" value="" /></td>
        <td><input type="number" size="5" id="b5" value="" /></td>
        <td><input type="number" size="5" id="c5" value="" /></td>
        <td><input type="number" size="5" id="d5" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a6" value="" /></td>
        <td><input type="number" size="5" id="b6" value="" /></td>
        <td><input type="number" size="5" id="c6" value="" /></td>
        <td><input type="number" size="5" id="d6" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a7" value="" /></td>
        <td><input type="number" size="5" id="b7" value="" /></td>
        <td><input type="number" size="5" id="c7" value="" /></td>
        <td><input type="number" size="5" id="d7" value="" /></td>
      </tr>
      <tr>
        <td><input type="text" size="20" id="a8" value="" /></td>
        <td><input type="number" size="5" id="b8" value="" /></td>
        <td><input type="number" size="5" id="c8" value="" /></td>
        <td><input type="number" size="5" id="d8" value="" /></td>
      </tr>
      <tr>
        <td>
          <input type="button" value="Calculate Grade" onclick="calcGrade()" />
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr>
        <td>Class Grade</td>
      </tr>
      <tr>
        <td><input size="5" name="gca1" /></td>
        <td><input size="5" name="gca2" /></td>
        <p id="test"></p>
        <p id="test1"></p>
        <p id="test2"></p>
      </tr>
    </tbody>
  </table>
</form>

function calcGrade() {
  var x = 0;
  var B1 = parseFloat(document.getElementById("b1").value);
  var C1 = document.getElementById("c1").value;
  var D1 = document.getElementById("d1").value;

  //Second Row
  var B2 = parseFloat(document.getElementById("b2").value);
  var C2 = parseInt(document.getElementById("c2").value);
  var D2 = parseInt(document.getElementById("d2").value);

  //Third Row
  var B3 = parseFloat(document.getElementById("b3").value);
  var C3 = parseInt(document.getElementById("c3").value);
  var D3 = parseInt(document.getElementById("d3").value);
  x = parseFloat(B1) + parseFloat(B2) + parseFloat(B3);
  document.getElementById("test2").innerHTML = x;
}