Output not updating as expected when checking a checkbox



Hi everyone!
I’m sorry if this is a silly question, but I’m losing my mind over this one.
I’m going through Beginners JavaScript 5th Edition by Jeremy McPeak.
I’m doing an exercise that involves building an interface for users to “build” their ideal computer and the price should uodate as they add/remove components.
I’m getting there, but I have a problem with my checkboxes. I currently have two checkboxes, one for BluRay and one for DVD-ROM, and they worked perfectly with the exception that the value I want to add with them to the final price doesn’t get substracted when unchecking them, but when I add an else statement that covers the case when the element is unchecked, only the last checkboxs behaves as expected. Here’s the relevant section:

    var compSpec = "Your chosen processor speed is ";
        var numberOfControls = myForm.length;
        var newPriceWithComps = newPrice;

      function additionalComp() {
        for (var index = 0; index < numberOfControls; index++) {
          var element = myForm[index];
          if (element.type == "checkbox") {
            if (element.checked) {
              compSpec = compSpec + element.value + "\n";
              if (element.value == "DVD-ROM") {
                newPriceWithComps = newPrice + 48;
                outputprice.innerHTML = newPriceWithComps;
              if (element.value == "Blu-ray") {
                newPriceWithComps = newPrice + 64;
                outputprice.innerHTML = newPriceWithComps;
            else {
                  outputprice.innerHTML = newPrice;

Thanks so much in advance for your help!!

Have a nice day.