Javascript通过单击我的按钮更改我的对象的值,但再次单击时,它不会切换回

我已经设置了一个if | else if脚本,将项目上显示的温度从Celcius切换到Ferinheit,它可以正常工作。当我单击“C”时,它会进行数字转换,并在末尾附加“F”。然而,现在当我点击“F”时,它不会切换回来,我也不知道为什么。我尝试在函数之外声明变量,以防它们被覆盖,但这也不起作用。以下是JS代码(至少是与问题相关的部分):

        num = Math.round(parseInt(arr.main.temp));
        var temp = num+String.fromCharCode(176)+`<span class=\"temp\" id='ctof'>${tempValue}</span>`; 
        $("#temperature").html(temp)
        $('#ctof').click(function () {
          var currentTempUnit = tempValue;
          var newTempUnit = currentTempUnit == "C" ? "F" : "C";
          console.log(newTempUnit);
          tempValue = newTempUnit;
          if (newTempUnit == "F") {
            num = Math.round(parseInt(arr.main.temp * (9/5) + 32));
            var fahTemp = num+String.fromCharCode(176)+`<span class=\"temp\" id='ctof'>${tempValue}</span>`;
            $("#temperature").html(fahTemp)
          } else {
            $("#temperature").text(temp);
          }

对于完整代码和CSS等,代码笔位于此处: https://codepen.io/chase-hippen/pen/WzqBvj?editors=0011