title: Flickr API always returning the same data
body: <p>I have a small weather app. I get the weather data via "POST" request and append it to the document, that works good.</p>
  
  <p>The users can query the weather by City, now I wanted to load an image of that city with a separate jQuery $Ajax() request.</p>
  
  <p>However, I always get the same result.</p>
  
  <p>The app relevant app structure looks like this:</p>
  
  <pre><code> &lt;input id="getIt" name="cityajax" type="text" class="ghost-input" 
   placeholder="Enter a City" required&gt; // get user input, querying a city
   &lt;button id="submit"&gt;Submit&lt;/button&gt;
  
           &lt;span class="humidLogo"&gt;Current humidity:&lt;/span&gt; &lt;i class="fas fa-temperature-low" &gt;&lt;/i&gt;    &lt;span class="apiHumidity"&gt; % &lt;/span&gt;
  
  
         &lt;div class="FlickResponse"&gt;&lt;/div&gt; // flickrResposnse gets appended here
     &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is not relevant, so I follow up with the relevant JS function right away:</p>
  
  <pre><code>var destination = $("#getIt").val(); // cache the user input, I am not sure I have to listen for a change event here and then update the state.
  var flickerAPI =
    "https://api.flickr.com/services/feeds/photos_public.gne?format=json&amp;tags=" +
    destination; // the url to get access the api
  
  $.ajax({
    url: flickerAPI,
    dataType: "jsonp", // jsonp
    jsonpCallback: "jsonFlickrFeed", // add this property
    success: function(result, status, xhr) {
      $(".FlickResponse").html(""); // here I want to empty the contents of the target div, but this never happens
      $.each(result.items, function(i, item) {
        $("&lt;img&gt;")
          .attr("src", item.media.m)
          .addClass("oneSizeFitsAll")
          .appendTo(".FlickResponse");
        if (i === 1) {
          return false;
        }
      });
    },
    error: function(xhr, status, error) {
      console.log(xhr);
      $(".FlickResponse").html(
        "Result: " +
          status +
          " " +
          error +
          " " +
          xhr.status +
          " " +
          xhr.statusText
      );
    }
  });
  
  </code></pre>
  
  <p>That is all. So why do I always get the same response from the API? Do I have to listen to change events on the input field? Because the POSt request work without a change event listener.</p>
  
  <p>Is it because I am querying 2 APIs and I am using the same input field for the value(stupid question, but you never know x).?</p>
  
  <p>Here is a Codepen with the full code, just enter a city and click the submit button:</p>
  
  <p><a href="https://codepen.io/damPop/pen/qLgRvp?editors=1010" rel="nofollow noreferrer">https://codepen.io/damPop/pen/qLgRvp?editors=1010</a></p>