Javascript Toggle HTML
<p>I am creating an app that allows the user to check the local weather and temperature in celsius or fahrenheit. However, I am having a problem when toggling between the two unit types when the temperature is clicked on. <a href="https://codepen.io/Hudson_Taylor11/pen/RROJrw?editors=0010" rel="nofollow">This is</a> the link to my demo.</p>

<p>And here is my Javascript code:</p>

<pre><code>if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $.getJSON("https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&amp;lon=" + position.coords.longitude + "&amp;units=imperial&amp;appid=a62849f462c6573114f32a691f5d3c3f", function(json) {
      var all = JSON.stringify(json);
      var weather = JSON.stringify(json.weather[0]["description"]);
      weather = weather.slice(1, -1);
      var tempFahrenheit = JSON.stringify(json.main.temp);
      var tempCelsius = JSON.stringify(json.main.temp * 2);
      $("#weather").html(weather);
      $("#temp").html(Math.floor(tempFahrenheit) + " &amp;deg;&lt;span id='units'&gt;F&lt;/span&gt;");

      $("#units").on('click', function() {
        if ($(this).text() == "F") {
          $("#temp").html(Math.floor(tempCelsius) + " &amp;deg;&lt;span id='units'&gt;C&lt;/span&gt;");
        } else {
          $("#temp").html(Math.floor(tempFahrenheit) + " &amp;deg;&lt;span id='units'&gt;F&lt;/span&gt;");
        } 
      });

    });
  });
}
</code></pre>