Javascript- Attemping to empty pre tags results multiple strings

Question

So, my script worked fine when I was only looking to receive temperature data, but I decided I wanted to also display the location.

$(function() {
   $("#getzip").submit(function() {
    var zip_data = $(this).serialize();
    $.getJSON("get_weather.php", zip_data, function(data) {
       $("#temperature", "#location").empty();
   $("#location").append(JSON.stringify( data.current_observation.display_location.full, " "));
  $("#temperature").append(JSON.stringify( data.current_observation.temperature_string, " "));
  });
  return false;
 });
});

HTML

<h1>Weather</h1>
<hr />
<p>Enter your zipcode to recieve local weather.</p>

<form method="get" action="get_weather.php" id="getzip">
    <p>
    <label for="zip">ZIP:</label>
    <input type="text" name="zip" id="zip">
    <input type="submit" name="button" id="button" value="Submit" >
  </p>
</form>
  <pre id ="location">
  </pre>
  <pre id="temperature">
  </pre>
 </body>
</html>

Instead of emptying the pre tags after I click submit again it just generates

 "Toms River, NJ""Toms River, NJ""Toms River, NJ""Toms River, NJ""Toms River, NJ""Toms River, NJ"
"73.4 F (23.0 C)""73.4 F (23.0 C)""73.4 F (23.0 C)""73.4 F (23.0 C)""73.4 F (23.0 C)""73.4 F (23.0 C)"

Answer 1

You use the jquery selector the wrong way. Replace $("#temperature", "#location") with $("#temperature, #location") and it should work as expected